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Host Unlimited Domains with MyServerWorld”™ 10.0 


Host an Unlimited Number of Domains for FREE using the worlds most 
advanced, feature rich Web Hosting Control Panel, MyServerWorld™ 10.0 


WebFusion 
Reseller 


PER MONTH (or £500 per year) 


Why not join thousands of other Resellers, 
Web Designers and Entrepreneurs and 
sign-up for the UK's Number One Web 
Hosting Reseller Account? 


FREE 


» SETUP , 


Benefits of the WebFusion Reseller 
Account Include*:- 


* Design your own Control Panel 100% Branded to your 
Company for Free! 

* Design your own Web Hosting Packages and Change them 
in Real Time Online! 

¢ Full Customer Management System 

* WebFusion launched the Original Reseller Package in 
1998, Join the Leader not the Followers! 

* Innovative New Features added all the time 

* WebFusion Manage over 4000 Servers and Monitor them 
around the clock! 

* Instantly Setup and Manage your Accounts Online with the 
UK's Most Flexible Reseller Package 


Reseller Simple Includes:- 

¢ Unlimited Domains (no additional fees) 

¢ Unlimited E-mail Addresses (forward and catch all) 

* Unlimited E-mail Announcement Lists 

* Unlimited E-mail Auto responders * Unlimited Spam Filters 
* Between 5 and 500 MB of web space * Full FTP access 


Reseller Advanced Includes:- 


¢ All the Features that are in your Master Account in its own 


separate account 
") 
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UNLIMITED DOMAINS 24/7/365 FREE & UNLIMITED 


TECHNICAL SUPPORT 


MULTIPLE CONNECTIONS 
TO THE INTERNET 


Your Master Account Includes:- 


GD Host as many Domains as you like with no Additional 
Charges 

GP Unlimited Web Space 

GD 10GB Data Transfer (Bandwidth) per Month 

G&D MyServerWorld™ 10.0, UKis Most Powerful Control Panel 


¢ FREE and UNLIMITED 24/7/365 Phone and E-mail support 

* State-of-the-Art Data Centre * 3 Connections to the Internet 

* Unlimited E-mail Forwarding * Unlimited Mailing Lists 

* Unlimited Autoresponders * Unlimited Spam Filters 

* Full CGI-BIN & Perl * Real Audio & MP3 

* MIVA Scripting Language * 10 MySQL Databases 

* Manage MySQL Databases Online * Active Server Pages 
(ASP) * SSH Telnet Access * PHP4 Scripting Language 

¢ Webalizer Graphical Statistics * 500 Sub Domains 

* Use our Generic Name Servers for Free * Detailed Online Help 

* Password Protection * Custom Error Messages * 15 Free CGI 
Scripts * Full FTP Access * Powerful Online Mail Client * Back 
Up Your Web Site Online * Web Site Link Checker & HTML 
Validator * Add E-commerce Option For Small Fee 

* Control Your Account Online With no Fuss * Termination 
Anytime * 99.9% Uptime * 30 Day Money Back Guarantee 

* Server Backed Up Every Day * One Hour Setup! 

Then add as many additional accounts as you like! 


& 


MONEY BACK 
GUARANTEE 


MYSERVERWORLD 10.0 


¢ Cc BEasas ~ CD) pirecr We welcome all major debit and credit cards. Prices exclude VAT @ 17.5% 
er Se z Debit *Some Features Only Available on Reseller Master and Advanced Additional Accounts 


e-mail us: sales@webfusion.co.uk | 


order on-line: www .webfusion.co.uk 
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Check it out yourself 
Www. 123-reg.co.uk 


BRegister 


123-reg delivers a totally automated service with the lowest prices in the World, guaranteed! Stunning price includes: 


Web based control panel » Web forwarding * Change name servers * Holding page wizard = * 
Catch-all e-mail forwarding * 100 e-mail forwarding addresses * Full domain & renewal management 4 Op 
Change IPS tags (UK domains) » Change Contact Details * Display and e-mail invoice on 


Manage your own DNS * Domain name locking » Affiliate scheme * No transfer out fee 


Additional services include: Domain Watchers, POP3 and Sub-domains, Pre-register for new TLDs. 


Peg culls before you buy... 1tsk ree! | 


The 123-reg site builder is a clear market leader in terms of features and functionality, having been developed purely 
with our customers in mind. Exclusive to 123-reg, this new low-cost service allows anyone to build and maintain a 
professional looking web site in minutes; no knowledge of programming required! 

ie 
Includes all the necessary tools required to create and update a web site, such as over 100 designs, templates, an £4.20° 
intuitive editor, tables, forms and multimedia capabilities. The product is ideal for people and companies who want to 
establish an on-line presence but don't want to get immersed in development or high costs. 


123-reg manages its own UK based data centres, with state-of-the-art security and all the backup facilities you would 
expect from a market leader. Your site will be hosted on a high-end server and be totally under your control via our 
easy to use control panel. Choose from two great packages that will keep your web sites on-line...all the time! 


Regular: 
250 MB for £2.99+ per month, 1 GB data transfer (bandwidth) per month, CGI/Perl, on-line file manager, 10 POP 3 
accounts, Webalizer statistics, Unlimited e-mail forwarding addresses. 


Xtra Large: 
500 MB for £4.99+ per month, 2 GB data transfer (bandwidth) per month, CGI/Perl, on-line file manager, 25 POP 3 
accounts, Webalizer statistics, Unlimited e-mail forwarding addresses. 


a ca Host 


“Plus registrar registration fee, see web site for full details. **Monthly fee must be paid annually. Europe 
t Monthly fee, must be paid annually and excludes one-off setup fee of £9.99. All prices exclude VAT. E&OE 
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Improve your chances of getting the best 
clients by creating a digital portfolio 


08 Interactive portfolios 


CD and Web portfolios have many benefits 
over the traditional leather handheld ones. 
Take some advice from the professionals 


76 Burning your own CDs 


If you’re creating a disc portfolio, you'll want 
your own CD writer. We review six of the best 
and recommend some software packages too 


94 Further reading 


We review six books that'll guide you 
deeper into the multimedia world of 
interactive portfolio design 


PROFILES » 


Online portfolios from professional designers 


84 Crush Design — graphic designers 


Brighton-based outfit whose minimalist Website belies the use 
of traditional design tools in the office 


88 Bukwild — design studio 


Four-strong Sacramento team whose sense of fun and 
design ability is reflected in its sleek, playful site 


90 JohnJohn — animation and music 


Take a colourful, humorous tour around the online art gallery 
of this two-person East London studio 


PULL PROJECT 


Follow our in-depth guides to creating digital portfolios for our fictitious company, So&So Design 


pap ONLINE PORTFOLIO 


PHOTOSHOP AND DREAMWEAVER PHOTOSHOP AND DREAMWEAVER 

16 Planning your Website 24 Filling it with content 

The first step to creating your online Start bringing components into your 
portfolio is to plan the content and create an Website, develop them with style sheets and 
initial sketch of the layout consider copyright issues 

FIREWORKS AND DREAMWEAVER DREAMWEAVER AND FLASH 

32 Making it interactive 40 The finishing touches 
Create an intuitive navigation system in Polish your portfolio by incorporating video 
Fireworks then add some pop-up windows and creating feedback forms, before 
through Dreamweaver publishing and promoting it 
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DIRECTOR AND PHOTOSHOP 

50 CD pre-production 

Begin by deciding on the hierarchy of your CD content, 
designing an interface and creating a loading graphic 
DIRECTOR 

96 Animating text and graphics 


Import text and graphics into your portfolio then create 
transitions in Director MX to get everything moving 


Follow our tutorials 
starting on page 49 to 
create a complete 
interactive portfolio on 
CD-ROM 


DIRECTOR 
62 Adding more interactive elements 
Introduce some sound and video, and turn your 
CD elements into an easily navigable system 


DIRECTOR 
70 the finer details 


Add a contacts page to your portfolio, create 
a stub projector and burn everything to CD 
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All the programs you need to make a digita 


DUAL DEMO 


Dreamweaver MX 


This powerful Website creation tool is 
used throughout our Web portfolio 


l portfolio... 


DUAL DEMO. 


Flash MX 


Macromedia's interactive software 
enables you to animate text and 


penconty pio 6 project. Your Dreamweaver lessons graphics or add video to your portfolio. 
TANT CP Sia begin on page 20 We use Flash on page 42 
DUAL DEMO DUAL DEMO 


Fireworks MX 


Use Fireworks to create interactive 
buttons for easy navigation around your 
online portfolio. See page 34 for step- 


Director MX 


Build rich content for your portfolio. 
Integrate images, sound, movies and 
Flash files throughout our CD tutorials 


by-step instructions starting on page 50 
PC DEMO MAC DEMO 


Tutorial files 


Our cover CD also 


Instant CD/DVD 


DragonBurn 


6.5 


This demo from VOB Inc. can be used 
to burn music, videos, photos and data 


NTI DragonBurn enables you to write 

audio and data CDs, and the CD Copy 
facility supports the duplication of all 
types of CD formats 


contains all the source 
and project files needed 
to create our online and 
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The advantages 
Of going clartal 


Once, a portfolio was a well-presented folder taken to interviews, 
but the Internet has changed all that. The Web’s increasing 
ubiquity means there’s never been a better opportunity to present 
your wares to the world, but how do you best make an interactive 
portfolio and what are the benefits? We investigate... 


hile some people embrace new technology 
at every opportunity and have probably had 
an interactive online portfolio since 
Netscape Navigator first supported images, 
you might be wondering what all the fuss is about, 
especially if you're a traditional illustrator or graphic 
designer. Whether you're a freelancer who's been in the 


industry for years, or a newcomer looking fora break, 
why bother putting your wares on the Web or ona CD 
when you may already have a perfectly good printed 
portfolio that you can present to people? 

‘Two important reasons immediately spring to mind: 
time and money. Even if you're the most traditional of 
designers, you don't want to spend time or money > 
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RICHARD MAY 


According to Richard May, his 
recently relaunched portfolio 
Website at [w] www.richard- 
may.com succeeds by 
conforming to the age-old 
‘sensible Web design’ rulebook: 
“Make it easy to navigate, quick 
to load and appropriate.” 


The interface of the Loopland 
Website at [w] www.loop- 
land.co.uk is more reminiscent of 
a Web design outfit than an 
illustrator, which may make 
people think they've come to the 
wrong place. However, it’s easy to 
navigate, and illustrations are 
displayed at a good size in order 
to check them. 


creating dozens of costly, heavy, printed portfolios to 
send to anyone who takes an interest in your work. The 
nature of the Web means it’s relatively simple to enable 
numerous people to see your work, and for them to 
spread the word just by emailing a link. “In many ways, 
an interactive portfolio acts as a kind of free-roaming 
agent on my behalf, but without any sort of fee,” says 
Pixelsurgeon's Richard May. “With tight deadlines and 
fast turnarounds, it’s comforting to know that | don't have 
to spend big just to keep work coming in each month.” 


Easy access 

The fact that everything's in one place is also an 
advantage — to both you and the potential visitor. “Art 
directors are responsible for a multitude of tasks way 
beyond choosing an illustrator for a particular feature,” 
explains Richard. "It’s often easier for them to visit a 
user-friendly, easily navigable site, than to rummage 
around the back of a filing cabinet for old hard-copies.” 
Asimilar principle applies to illustration source books 
and annuals. Instead of paying over the odds to have a 
handful of featured illustrations each year, you can have 
a Website for a fraction of the cost. As you're in control 
of such an entity, you can ensure that your most current 
work is available and also rapidly update it to suit any 
major changes to your style. Of course, overtly 


interactive companies often have requirements for 
more traditional illustrators, too, and the first place 
they're likely to look is on the Web. 

Hillman Curtis has another spin on interactive 
portfolios, primarily for those still wanting to break into 
the industry: “As someone who works primarily in the 
online medium, interactive portfolios are the only thing 
I'll look at when evaluating a potential hire. While 
résumés and schooling are great, | need to see howa 
designer approaches the medium in which | will expect 
them to design.” Many other agencies echo this 
sentiment, even those biased towards offline activities. 


Moving images 

So, apart from being more cost-effective and 
convenient, what advantages do interactive portfolios 
have over their traditional paper counterparts? 
According to Hillman Curtis, “The very fact that they’re 
interactive and exist in the online medium makes them 
powerful tools for designers to express themselves and 
show their abilities.” Like a print-based portfolio, you 
can create a consistent look to display varied work, but 
an interactive portfolio can go much further and contain 
moving images, movies and games — all within a single 
interface. You can use subtle animation to encourage a 
visitor to explore a specific section of the portfolio or 


Professional advice 


We asked some prominent designers what they considered essential 
for the successful creation of an interactive portfolio... 


CONSIDER THE AUDIENCE 

“A designer should always consider the 

people he or she thinks might view their 

work,” says Hillman Curtis. “And this is 

equally true for an interactive portfolio. 

Visitors may include advertising agency 
people who don't have time to wait for 
lengthy downloads or excessive animation, 
and simply want to see the work. Actually, | 


think it’s safe to say this is a consideration 
no matter what.” 


KEEP IT UPDATED 

“| find an interactive portfolio Website is 

essential for many reasons,” claims 

Pixelsurgeon's Richard May. “The main ones 

being that ‘new’ clients are constantly 

discovering my work, and established 
clients are able to keep up-to-date with 
what I’m doing.“ So, it’s crucial to ensure 
that recent work is online? “Totally,” says 
Richard. “Having a regularly updated site 
can save you time and money — two things 


that are becomingly increasingly scarce for 
freelance illustrators.” 


MAKE IT YOUR OWN 

Airside’s Alex Maclean stresses the 
importance of making portfolio sites unique 
to the subject. “For the Nadav Kander site, 


we were asked to create a site that was a 


beautiful experience forthe user, and easy 


to navigate without having a screen full of 
menus,” explains Alex. “Therefore we 
created an interface that challenges most 
People's pre-conceived ideas of what a 
Portfolio site should be. The resulting site is 
unique and allows the user to explore the 


artist's work ina non-linear fashion.” 


view a certain image, and you have the choice of 
displaying things in a linear or non-linear fashion. Of 
course, many of these points are a particular advantage 
for cross-media companies such as Meomi [w] www. 
meomi.com, whose quirky site is both informative and 
entertaining. The portfolio page invites you to “try a 
turnip for a happy surprise”, each of which, once 
clicked, shows project stills in a pop-up window. This 
suits the nature of the company, and anyone hankering 
fora more standard interface can instead choose from 
the selection of work displayed below the turnip patch. 
However, as Hillman Curtis states, everyone should 
benefit from an interactive online portfolio — avoiding 
creating one is the real problem: “If you're a print 
designer or a photographer and you don't make the step 
to display your work online, you’re essentially cutting 
off so much potential exposure.” Like the majority of 
designers, Hillman reckons the Web is the delivery 
medium of choice for any sort of interactive portfolio: 
“The design world — regardless of whether it’s print, 
broadcast or Web — uses the Web for everything: 
inspiration, information, research, and certainly to 
check out work of potential hires.” The relatively low 
cost of set-up and creation, immediate accessibility 
and ease of updating, cement this decision for most 
people. However, there are alternatives, as Tonic’s 
Ranzie Anthony explains: “The delivery medium you 


Designer’s favourite, Monica 
Eskedahl Grafisk Design at [w] 
www.eskedahl.se wraps her 
interactive portfolio up ina slick 
Flash-based interface. However, 
in some ways it shows the danger 
of putting style before substance, 
as most portfolio images are 
painfully small. 


choose when creating an interactive portfolio is very 
dependent on the brief and audience. You wouldn't want 
to send a CD-ROM to someone who has no time for 
direct mail and is happier reviewing work online. 
However, interactive portfolios on CD are great for 
displaying content that has large file sizes, such as 
movie footage and large games.” 


Know your medium 


Once certain of which delivery medium you're going to 
use, ensure that you're familiar with it. If you blaze 
ahead regardless, the end result will be a failure. “I've 
seen work from great print designers who simply don't 
understand the interactive space — and it shows,” says 
Mark Johnson of Clear’. If your interface is poor, or the 
coding sloppy, then there's a danger that the work will be 
perceived in the same way. Those without the know-how 
to get their work online may find that a collaborative 
project reaps great rewards — something Richard May 
discovered with the relaunch of his Website [w] www. 
richard-may.com. “Although | designed the site, and 

the portfolio work is obviously mine, the majority of 
coding horse-work was by Brett Archibald of 
Archimedia Design at [w] www.archimediadesign.com. 
The result is an elegant, easy-to-use site that’s tight in 
both design and coding. » 


UNDERSTAND THE MEDIUM 

When creating an interactive portfolio, the 
need to understand the medium you're 
working in is paramount, according to 
specialmoves co-founder, Darrell Wilkins: 
“My pet peeve is browser windows that 
change their own size — especially the ones 
that take over the whole screen. Designers 
tend to make excuses that their designs 
necessitate such things. In fact, it merely 
reveals that they don't understand the 
constraints of the medium and this counts 
heavily against them.” 


LETTHE WORK COME FIRST 

“My main recommendation for any portfolio 
— interactive or otherwise — is to put the 
emphasis on the work itself,” states Tonic’s 
Ranzie Anthony. “Too many interactive 
portfolios suffer from being interesting 
pieces of design in themselves, which in 
turn detracts from the content — the main 
objective of the piece. A delicate balance 
needs to be maintained between the 


function of the portfolio and its design.” 


DON'T OVERDO IT 

Mark Johnson of Clear’ provides our final 
tip, which applies to pretty much any 
creative endeavour: “Don't put up crap 
work, don't overwhelm the user, and don't 
give absolutely everything away in your 
portfolio — always keep something up your 


sleeve for later on.” 


Images from Iceland’s 
straightforward navigation at [w] 
www.snubcommunications.com/ 
iceland makes viewing the 
photographs a breeze, while not 
detracting from the site's content. 
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Meomi’s eccentric portfolio at 
[w] www.meomi.com suits the 
company’s image, and also 
highlights its cross-media 
capabilities. However, rather than 
rely on people solely using the 
sometimes-finicky Flash turnip- 
patch navigation, several projects 
are displayed underneath ina 
more straightforward manner. 


Instead of instantly presenting the 
user with numerous pages of 
static library images and hard 
information to scroll through, 
Airside used Flash 5to create a 
playful interface for the award- 
winning Nadav Kander Website at 
[w] www.nadavkander.com. 


While it doesn't look particularly 
appealing, there's no denying that 
Preshaa’s simple interface at 

[w] www.preshaa.com is 
remarkably effective and 
efficient. Borrowing ideas from 
the file view of a Mac or PC, the 
portfolio is very easy to explore. 


Also, don't get distracted by interactive technology, 
as a first-time Photoshop user does with filters. 
“Software should be chosen for a reason, and not 
because you think it willimpress,” states Darrell 
Wilkins of specialmoves. “If in doubt, build a simple, 
functional HTML site and steer clear of wacky, 
experimental interfaces. Your portfolio should be 
showing off yourwork, so don't make it anything other 
than really easy for people to explore.” 

No longer the new kid on the block, Flash is what 
most people turn to when requiring more movement 
than HTML can provide. Flash-based portfolios tend to 
be a little more involved than their HTML counterparts; 
examples include the polished interfaces of Monica 
Eskedahl Grafisk Design [w] www.eskedahL.se and 
Tonic’s Shoot Productions [w] www.shootproduction. 
com, both of which contain slick, subtle animation. 
However, they do perhaps suffer with regards to the 
presentation of the work itself, which is often too small 
to make out properly — if you’re aiming to impress with 
illustration, it really needs to be bigger than a couple of 
hundred pixels across. 

Airside’s Nadav Kander Website at [w] www. 
nadavkander.com takes ideas of motion within a 
portfolio further, with an engrossing non-linear 
interface that enables visitors to rapidly view numerous 


The polished interface for Shoot 
Productions at [w] www. 
shootproduction.com by Tonic 
takes a while to get to grips with, 
but soon becomes intuitive. A pity 
then that the expanded portfolio 
images aren't a great deal bigger 
than the thumbnails. 
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thumbnails, which when clicked display the work at a 
suitably large size. Take care when choosing this route 
though, as the Flash plug-in happens to run very slowly 
on Macs — a potential problem if the bulk of your 
potential clients are likely to use that platform. Also, 
some people will not have time to wait for 
comparatively lengthy downloads or excessive 
animation — to paraphrase Hillman Curtis, some people 
simply want to see the work. 

If that’s the case, then Preshaa’s simplistic interface 
at [w] www.preshaa.com should impress. More akin to a 
PC or Mac's file view than an interactive portfolio, 
there's no denying that it’s easy to use, and the ‘put 
images in a new window’ checkbox is a particularly 
nice touch. However, its minimalist stance might also 
be detrimental: potential clients might take one look at 
the site and head elsewhere. Then again, upon further 
exploration, Preshaa’s work itself is rather minimalist 
and to the point in a stylish way, so the site's 
appearance is a logical front-end to the portfolio. 
Ultimately, you have to ask yourself what's important 
to you as a designer and design your interactive 
portfolio to reflect that. » 


Create this portfolio interface 


We show you how to create an effective navigation system for an online photographic portfolio. 
For best results, all photographs should have identical dimensions, as should all thumbnails... 


CTT 


IMAGES FROM ICELAND 


This site features photographs of Iceland 
taken during 2002. Please wait for the page to 
finish loading (you'll see the copyright banner) 
then open image sets via the links below, or 
the [@l icans. Close categories by clicking the 
relevant Bl icons. Click thumbnails for larger 
versions of the images; holding the mouse 
cursor over each thumbnail provides a caption 
(asa pop-up and in the browser's status 
area). Note that if you click a thumbnail, you 
may have to move the pointer off and back on 
again to see this explanation. 


Feedback on this site and its contents is 
welcome via engrannell@yahoo.com. 


After completing this short tutorial, you should end up with something like this. 
Clicking on the nav-bar links or icons will open the relevant thumbnails (in the order 
they appear in your Web document). Clicking on a thumbnail will make its linked 


image appear in the main display area in the top-right. 
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S This CSS information relates to images. The 
‘img’ settings append a one-pixel border and 
ten-pixel right and bottom margins to all images. 
The two classes underneath are over-rides for the 
main image and icons — both remove the margin 
settings and '.box', the border. The .shunt class is for 
navigation links. 
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6 Begin a section by adding a div with the first id 
name set in step 5, a class of ‘selectedArea’ 
and a style of ‘display:none’ so it's initially invisible. 
Within, include a heading and a close box, which 
has identical ‘onclick’ information to its related link 
in the navigation bar created in step 5. 
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target = document .geté lenent®yid{ target!d); 
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1/ weap \nage ond scrolt screen 


function swapPhoto(photosAC) { 
‘ocumant; Inages. lagPhoto.sre = “essete/* + photeshts 
scrol (To(@,8); 
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Create a new HTML document (we're using 
XHTML transitional for our DTD) and add the 
two depicted JavaScripts. In the first, the locations 
of the ‘open box’ and ‘close box’ icons need 
defining, and in the second, the location of the 
folder containing the images. 


FRIIS IS Beret umraroue/onc toned A See nt 


SG SRA TT 


4 Add a div with an id of ‘displayArea’ and 
underneath, one with a class of ‘selectedArea’. 
In the latter, place copyright information. In the 
former, place a right-floated paragraph with a 
default photograph (with a name of ‘imgPhoto') 
and then underneath any introductory copy. 
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Under the title, add all the thumbnail images 

and set their border values to ‘0’. Around 
each, add a link with the href of 
javascript:swapPhoto(‘image.jpg’), replacing 
image.jpg with the file name of the required 
photograph. Use window.status JavaScript and the 
‘title’ attribute to provide info about each image. 
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a In the head of the document, add the 
depicted CSS information. The #displayArea 
settings are for the area at the top of the page that 
will contain the site overview and current image. 
The classes .selectedArea and .selectedAreaDark 
are for open thumbnail sections and the navigation 
bar respectively. 


Between these, add a div with a class of 

‘selectedAreaDark' and a style of ‘clear:both' so 
it appears under the floated photograph. Create the 
depicted links within. Each icon requires a unique 
name and id, which is the second configurable 
option within each link’s ‘onclick’ value. The first is 
the name of the div the link will toggle. 


Sa 


uit 


Add more sections in the same way, 

remembering to change each div's id value 
accordingly. Note that because margins between 
the images are controlled via CSS defined in step 3, 
you don't need to format them within table cells. 
Spacing and borders can be edited by changing said 
CSS information. EEE 
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Part 1: Pre-production 


Arguably the most important stage in creating a successful 
online portfolio is the planning. Think about the kinds of clients 
you want to attract and do a thorough mock-up on paper 


Planning content and sketching ideas 
Finalising the design in Photoshop 
Creating tables in Dreamweaver 
Styling text and adding inline frames 


Part 2: Importing content 


To showcase all aspects of your work, you’ll need to know 
how to work with different graphical formats. Add text and 
graphics, and use style sheets to create a uniform look 


Importing and formatting HTML text 
Introducing GIFs and JPEGs 
Developing your style sheets 
Copyrighting your work 


Part 3: Adding interactivity 


A static portfolio probably won’t get you noticed. Add some 
interactive buttons using Fireworks, and use Dreamweaver 
templates to make updating your site quick and easy 


Dynamic navigation in Fireworks 
Setting up templates 

Creating pop-up windows 
Fine-tuning your homepage 


Part 4: Finishing up 
Adding video is a nice touch - we show you how to get the best 


results. Finally, publish your site, promote it within search 
engines and wait for the job offers to come flooding in 


Working with video 
Creating feedback forms 
Getting noticed 
Publishing your site 
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Creating an online portfolio 


Want to create your own promotional Website? We tell you 
everything you need to know about planning and publishing 


your work online... 


he Web is arguably the most accessible 

medium for promoting your work to the largest 

possible audience. With support for most media 

formats, it’s an ideal way of publicising your 
design skills, thereby offering potential employers and 
collaborators a comprehensive introduction to your 
creative skills. 

The following 27 pages will guide you through the entire 
process of creating your own online portfolio; you'll need 
to provide your own work and imagination to create results 
that will be unique to you. 

Before beginning, you might want to consider 
registering your own domain name (Web address) and 
arranging for hosting space. Ask friends or colleagues for 


recommendations or take a look through the advertisers 
listed in the back of our sister publication, 
Computer Arts. 

Once your site is up and running, you'll want it to be as 
visible as possible by registering it through various search 
engines. There are online services that'll help, although 
doing this manually may be more reliable. Sending 
personal emails or letters and publicising your site 
through newsgroups or forums is still the best way of 
getting quality visits to yoursite. 

Finally, don't forget to keep your site up to date; your 
online presence will be most people's gateway to your 
creativity, and you don't want that first impression to 
appear stale and outdated. 
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Part 1: Content is king 


Determining the content and structure of your site... 


Compile your 
content 


As part of the initial planning 
stages of your site's development, 
try to compile as much content 
as possible. Knowing the kind of 
copy or imagery you want to 
include will undoubtedly 
influence the final look of the 


package design 


site. Many designers make the 
mistake of creating a killer look 


package design 
photography 


and feel fora site before 
deciding what to fill it with. The 
design process should be 


moulded around the content for 


Keep things trim so that visitors have direct 

access to your work. Create three main You can see how the Portfolio area expands 
sections, providing information about So&So, its 3 into individual pages for the different areas in 
work and its contact details. You could add more which So&So works. Despite this, you can keep a 
creative areas, but keep the core content main Portfolio page to act as an index and provide 
recognisable and accessible. an overview. 


the most usable, functional and 


“aoe Pu This site is intended for an imaginary design 

hoslisiee resis: company called So&So. The first thing you 
need to do is plan the site structure so you can 
determine layout and navigation elements before 
looking at design implications. 


Part 2: Sketching ideas 


Experiment with initial designs and layouts... 


Planning 


Don't spend an excessive amount 
of time planning your site, 
because it'll undoubtedly 
develop through the various 
production stages. However, 
anticipating potential problems 
in advance could save you 

hours later. 


Go through a similar process for the actual 
page layout. Although your homepage will 
have a unique design to welcome visitors to the site, 
the content pages need to be more functional with 
considerations for navigation and ease of use. 


a Using your structure and bearing in mind your 
content, continue to plan the basic layout. 
This can be as unique and creative as you like, but 
remember that it shouldn't overshadow the content. 


You may find it useful to mock up basic layout 

variations on paper. Play around with some 
variations for the homepage before deciding on 
your chosen layout. 


SO&SO DESIGN 
FREELANCE DESIGNER 


a Develop your chosen layouts further on paper With content pages, you need to anticipate G There will be inevitable changes to your layout 
to get a better idea of how they might be more dynamic content areas such as how any structure as you continue the pre-production 
composed. As well as the obvious elements such as secondary navigation might be integrated, the process, However, try to consider attributes such as 
logo, navigation and copy, your homepage should effects of rollover buttons, or how each page will logo or image proportions to minimise major 
include an inline frame to contain the latest news. be identified. amendments later on. 


Part 3: Finalising the design and layout 


Recreate your sketches in Photoshop to mock up the final design... 


Page dimensions 


Most users view their computers 
ata minimum resolution depth of 
800x600. Don't exceed these 
dimensions or you may find your 
site visitors need to scroll the 
page sideways or, worse, miss 
potentially important content. It's 
safest to design layouts below 
these actual dimensions to 
compensate for things like tool 
boxes and scroll bars. 


Web-friendly fonts 


You may be familiar with the 
concept of Web-friendly colours, 
but similar limitations are applied 
to fonts. If a particular font isn't 
installed on a user's computer 
then an alternative has to be 
found. There are six common 
fonts available: Arial, Verdana 
and Geneva constitute the sans 
serif fonts while Georgia and 
Times New Roman provide the 
serif glyphs. Courier New is also 
available as a mono face. You 
only need to use these fonts for 
regular text that will be rendered 
in HTML. Other fonts can be used 
fortitles and so on, but these 
must be created as graphics. 


page title 


subtitle 


Recreate your sketches in Photoshop to 


re] Create a new file in Photoshop of around 700- establish more accurate dimensions and 


750 pixels wide with a 72dpi resolution. The proportions. Try to avoid any design elements at this 


height may need to be determined by the content. point so as to ensure your content, navigation and 
See ‘Page dimensions’ for advice on page sizing. layout are effective. 


portfolio portfolio 
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4 | With the basic layout determined, how you go Remember you can still play around with the 
about converting the layout into a final design layout at this point as you're simply mocking 


mock-up is up to you. We prefer to get the basic up the page prior to building. Duplicate the 
typography established with basic graphical Photoshop file to experiment with alternative 
elements, such as the logo, before developing the navigation using colours to show rollover states and 
design further. secondary navigation. 


With the structure and layout in place, you can 
now add a few decorative elements to the 8 | If you view your design with the guides turned 


page design. Try to keep these compact and within on, you can see how the page might be 
your proposed table cells to minimise complications reconstructed as an HTML page using tables for the 
during the production of your site. layout in the next phase of your site’s development. 


d diam nonummy nibl 
cidunt ut laoreet dolor 
lutpat, Ut wisi 


Lorem ipsum do 
adipiscing alit, sed diam 


You may find working with guides helpful to 

attain accurate positioning of elements and 
also to anticipate possible HTML table composition. 
As most Web pages rely on tables to determine 
layout, guides are a great method of being able to 
visibly toggle such parameters. 


portfolio 
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6 | You've now introduced some of the content 
into the design for a typical page so you can 
start to determine more of the typographical 
features that'll shape the site's style sheets. You 
can also develop the navigation and add a few 
usability features. 


9 | As the homepage will have a unique layout, 
we've gone through exactly the same process 
to get to our end design. Points to notice at this 
stage include the inline frame for the news scroller 
and the blank space to the right of that to contain 
a Flash movie. > 
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Part 4: Defining the site 


Configuring Dreamweaver to recognise the local and remote sites... 


Site definition 


If you don't have hosting 
arranged, you need only 
complete the local info fields 
and leave the remote info 


A site, in Macromedia Dreamweaver MX. is @ collection of files anc folders that comesponds to & 
website on a server 


Access option set to None. 
You'll be able to continue using uth aa pak a2 
Dreamweaverto create your site S0RSOI 


Example: MySite 


Local Root Folder (C Documents and Settings\Chis Schmat) 2) 


2 Blaefrem iccy Ae Lat Automancety 
but not to upload your site on 


Password | aeaeneen ‘Esme 
Buse Passive ETP 


Diiise Freie (Faeqad Settrge._] 
luce set encrypted seat tog 


Delaut \mages Folder (C (Documents and Settings\Chwie Schmid) 5) 
completion. Once you've es = ae eA 
HTTP Address: | hitp: //vew soandsodesign co.uk/ 


This adiess enables the Lirk Checker to 
detect HTTP frks that refer to your wn 
wis 


Cache FZ) enable Carre 
The cache mantains fle and asset 
leamoton nthe the The speeds up the 
Asset panel irk management. and Ste Map 
testzes 


completed your own site and 
arranged hosting, youcan 
simply enter the relevant data 
and upload to your server at 


fen 
a later date. Clastomancaty usa fhes to server on save, 


‘Check In/Out [7] rable File Check tn and Chasck Out 


The Remote Information determines the server 

location where your site is hosted. You need to 
obtain this information from your hosting company. 
The remaining categories for Testing Server, Cloaking, 


Open Dreamweaver and choose Site>New The most basic configuration requires 

Site to instigate the site definition. Use the tabs information about the local and remote 
for either Basic or Advanced options (depending locations for your site. The Local Information enables 
how familiar you are with this task) for running Dreamweaver to recognise in which folder the site is 


through this configuration process. 


Part 5: Laying the tables 


Using Dreamweaver to arrange the layout tables... 


Row heights 


Although it's possible to specify 
the row height within 
Dreamweaver, this is a 
notoriously unreliable way of 
guaranteeing the dimensions, 
due to the way different 
platform/browser combinations 
understand such information. 
Most experienced Web 
designers use integral graphics 
to determine height attributes. 
The width dimensions, however, 
are much more reliable and can 
be entered directly as a table 
cell's width attributes. 


Calculating 
column widths 


To get an accurate column 
measurement for your layout 
tables, use the Marquee tool in 
Photoshop to select the required 
area. The width of your selection 
is then displayed in pixels on the 
Info palette (Window>Info). 


i | 
ee Open the page_layout.psd file from the CD 
and familiarise yourself with the design and 
page components. Turn on the guides to see how 
we've constructed the layout and anticipated 
building the site using HTML tables. 


contained on your computer. 


Make a note of the width of the design (720 

pixels) and then calculate the number of rows 
and columns necessary to recreate the table (8x5). 
Create a new file in Dreamweaver and Insert>Table 
using the above attributes. Leave the Border, Cell 
Spacing and Padding at 0. 


4 | Complete the remaining column widths and 
double-check that the total number of pixels 
along the rows equals the same dimensions of the 
main table of 720 pixels. From left to right, the 
column widths in pixels should be 93, 258, 18, 
258 and 93. 


The basic table you've just created will contain 

your entire Web page. As the original design 
was intended to sit in the horizontal centre of the 
browser screen, you can select the entire table using 
the <table> tag just above the Properties panel and 
set the Alignment to Centre. 


and so on, can be bypassed for this project. 


> Twnelmes 
+ Resutts 


3 The generated table now needs the column 
widths setting. Using the guides in our original 
Photoshop file, calculate the required widths in 
pixels. Select all the cells within a column and enter 
the appropriate dimension within the width (W) 
field on the Properties panel. 
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G If you've got the screen resolution to expand 
your Dreamweaver page, you'll notice how 
the table just constructed will always centre itself 
horizontally on the page while retaining the 
specified column widths. 


Naming a 
homepage 


We've named the homepage 
‘index.htm’ for a purpose, as this 
is the most common default 
name for the main page within 
any site folder, allowing us to give 
out our Web address as simply 
www.soandsodesign.co.uk. 

If we'd called this file 
‘homepage.htm’, for example, the 
server would not recognise it 
and you'd need to let visitors 
know that yoursite is at 
www.soandsodesign.co.uk/hom 
epage.htm, which makes fora 
much longer URL as wellas 
confusing many visitors and 
search engines. 

There are other default home 
page names, such as 
‘default.htm’, which are 
determined by your server 
config. You shouldn't have any 
problems with index.htm, but 
check with your hosting 
company if in doubt. 


Disappearing 
width attributes 


You may find as you merge table 
cells that Dreamweaver removes 
width attributes from the 
affected cells. You might imagine 
Macromedia providing an 
intelligent system that calculates 
the sum total of the two merged 
cells to automatically create the 
new dimensions. Unfortunately, 
this isn't the case, so you'll need 
to work out the new dimensions 
and enter these manually. 


{cwmvere cignea mreers-cesrge 


O D | 


Next, you need to create a new file in the root 
of your site folder and call this index.htm, and 
run through the same steps as before using the file 
homepage.psd as a guide. 


Ll 
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9 | In contrast to the main page design, the 
homepage requires a slightly more complex 
table with some merged table cells to allow for 
easier production, more efficient code and more 
reliable rendering through the browser. Back in 
Photoshop, make the table cells layer visible. 


8 | The table you create should have 11 rows by 5 
columns with a width of 720 pixels. Use the 
same process as before for setting the column 
widths at 33, 318, 18, 318 and 33, and centre the 
table to the page. 


If you return to our page_layout.psd file and 

turn on the table cells layer for this file, you'll 
see this needs much less cell merging than the 
homepage. There are only a couple of essential 
instances where the title graphics overlap the top 
horizontal rule, for example. 


To merge cells, simply click and drag adjacent 

cells to select them and then click the merge 
cells button found in the bottom left of the 
Properties panel. Notice that we haven't merged 
any cells into the central column. 


We haven't modified the central row as a 
precaution against possible layout shift when 
we introduce content, as there may be occasions 
when a row's content cannot determine the 
necessary height. By leaving a column free like 
this you can use transparent gifs to force the 
required height. 


Once this has been completed, the table 

should start to look a little more like a 
container for the designed page. We've turned on 
the borders in the illustration here so you can see 
the definition of the table more clearly. 


space photog 
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14 | We've suggested merging the outside columns 

simply for more efficient code, although you'll G Run through the same process as we did with 
notice how we've again left the central column the homepage to merge any required cells, and 
untouched to cater for any problematic layout as both pages should be ready for moving onto the 
content is introduced. next stage of the site's development. > 
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Part 6: Adding some style 


Introducing Cascading Style Sheets (CSS) to control text formatting... 


Handling style 


Although Dreamweaver provides 
reasonably comprehensive 
control over working with style 
sheets, this is presented ina 
form that's either entirely 

Wizard based or through full-on 
code editing. You may want to 
consider getting hold of an 
external CSS Editorsuch as 
Bradsoft's TopStyle Pro, which 
integrates seamlessly into 
Dreamweaver and provides much 
more flexibility and control over 
your CSS files. 


Enter some random text into a cell of your 

index.htm file and you'll notice this is 
displayed using the rather ugly default Times New 
Roman font. You could change this using the 
controls in the Properties panel, but this is inefficient 
and quickly bloats the underlying code. 


<IDOCTYPE HTML PUBLIC "#WOCHOTD 
© <HTMt> 


Close the CSS file to return to your index.htm, 

and access the CSS Styles palette via 
Windows>Css Styles. Along the bottom of this 
palette is a row of buttons; click the one to the left 
to attach a style sheet to the open document. 


j Paragraph paragraph pera! 
paragraph paragraph parac| 


A better way of controlling such formatting is 

through the use of Cascading Style Sheets 
(CSS). Dreamweaver provides a number of possible 
templates that are useful as starting points. To create 
one, select File>New, and select the CSS Style Sheets 
category under the General tab. 
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In the alert box that appears make sure the 

Link option is checked (as opposed to Import) 
and click the Browse button to locate the style.css 
file we created earlier. Then click OK again to return 
back to our original file. 


sbodyeryle ( 
font-family; Verdana, Geneve, Ariel, Bed 
font-size: t2pz: 


Scroll down the options to choose the Text: 
Verdana, click Create and save as style.css in 
the root of your site folder. You'll be amending the 
CSS file to suit your design later on, so don't get too 
concerned over the code that's displayed just yet. 


Expanded text 


G You'll instantly notice your temporary text 
inherits the attributes set by the linked CSS file. 
The CSS Styles palette also contains other 
formatting options determined by the same file. 
Apply the style sheet using the same technique to 
your content page. 


Part 7: Inline frames 


Adding the news scroller to the homepage... 


Scared of HTML? 


If the idea of coding HTML fills 
you with dread, take a trip to the 
Macromedia Exchange site at 

[w] www.macromedia.com/ 
exchange/dreamweaver to 
search around for a suitable 
extension that will remove the 
discomfort of the pointy brackets. 


1 | Although you can install a dedicated extension 
to create inline frames, the actual code is quite 
basic. Copy the above code (also reproduced below) 
into the relevant cell of your index.htm file using the 
split-screen mode to access the HTML. 

<IFRAME width="318" height="168" 
src=“news.htm" frameborder="0" scrolling="auto” 
name="news">News Scroller</IFRAME> 


‘| 
(i) The page cannot be displaye 


‘The page you are kek fer @ Seven weet 
othe, 


Unfortunately, there is no direct support for 

inline frames within Dreamweaver despite 
support from the most popular browsers. To view 
the effect in action you'll need to preview your file 
in a browser. Again, we've turned on the main table 
borders to illustrate our point. 


The code you've entered references the file 

‘news.htm’ within the same directory as our 
‘index.htm’. Create a new file with this name and 
enter some ee ae before previewing the 
page in the browser. 
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Add content to 
your portfolio 


A portfolio is nothing without a full gallery of 
work that clients can browse through before 
deciding to commission you... 


( ost designers’ portfolios will | graphical formats and text to get your 
i showcase a range of workto | portfolio looking perfect. 


demonstrate how versatile We'll show you how to use style sheets 
that particular designer can to ensure that the text on your portfolio 
be. However, showing a range of work is uniform throughout the site. > 
can mean working with different file 
formats, such as .eps and .jpeg files plus 
video files and even .swf files. 
Follow our in-depth tutorials to see 
exactly how to work with different 


Illustration: Identikal [w] www.identikal.com 
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Part 1: Text and graphics 


With your layout in place, you can start adding content to your pages... 


GIF or JPEG? 


The two main graphic formats for 
use on the Web provide their own 
particular compression methods 
most suited to particular 
graphical compositions. 
Elements consisting of flat colour 
illustrative detail, such as our 
logo or the horizontal rules we've 
used in our designs, are best 
suited to the GIF format; while 
imagery with more gradual tones, 
such as photography, is more 
efficient as a JPEG 


ee 


Pay So far we've completed the groundwork for 
our page layout, but previewing our pages in a 
browser at this point still shows no visual results. 
The next stage is to understand the difference 
between what will be entered as HTML copy and 
what constitutes a graphic. 


contact 
photography 


space photos 


Cuent 
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BRIEF: 
phy to be used ona 


Click image to enlarce 


We've tried to make our Photoshop mock-ups 

as obvious as possible for the recognition of 
such components. As Verdana is a Web-friendly 
font, you can safely assume this'll be entered as 
HTML text while everything else should be 
converted to graphics as either GIFs or JPEGs. 


CLIENT: 
So & So Poster Company. 


BRIEF: 

To produce photography to be used or: 
@ new UK poster advertising campaign 
for a new documentary film ‘Space’; 


i 
— Click image to enlarge 
print | packaging | photography. | video. 


Sa eres 
info®soandsodesign.co.uk enna na & So Design 


Some basic formatting and alignment is 
necessary. The left-hand cells need to be right 
aligned, so select these either individually or 
together by clicking with the Control (PC) or Option 
(Mac) key held and then choosing the right align 
option in the Properties panel. 


Select File>Save for Web to launch 

Photoshop's Web optimisation tool. The 
composition of the logo is best suited as a GIF, so 
choose this as the format and knock the number of 
colours down to 16 to compensate for anti-aliasing. 


JB7 £298 


Add the required paragraph spacing into the 

main content to match that in the design, but 
don't worry about further formatting at this point as 
you'll be adjusting the style sheet for these elements 
once the graphics are in place. 


‘CLIENTS 
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BRIEF: 
To produce photography to be used on 
a new UK poster advertising campaign 

for a new documentary film ‘Space*: 


8 | Save the file as logo.gif into a graphics folder 
within your site. Now Insert>Image into the 
required table cell and align as you did with the text. 
Dreamweaver will automatically insert the required 
attributes, but remember to add the Alternative text. 


‘CLIENT: 

‘So & So Poster Company 

BRIEF: i 
‘To produce photography to be used on > | 
3 new UK poster advertising campaign =~ 
‘for a new documentary film ‘Space’.Click 
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Open the page_layout.psd file and turn on 

the guides. You may also find it useful to 
activate the layer cells guide. Start off by copying 
the HTML text elements into your unnamed page 
Dreamweaver file ignoring the top navigation for 
the time being. 


6 | To create graphics you could use Photoshop's 
slice feature, but unless the design is 
particularly complex, most experienced Web 
designers still prefer the control possible through 
manual conversion. Duplicate the file and crop in 
tightly around the logo using the guides as the right 
and bottom boundaries. 


& 
9 | As the main Space images are contained on 
their own layer, simply select the layer and 
Select>All and then Edit>Copy. Create a new 
document, which will inherit the appropriate 
dimensions, and paste into place. Save for Web, 
this time using the JPEG format. 


Working 

with copies 

Duplicating Photoshop files for 
cropping isn't strictly necessary, 
but it reduces the risk of 
performing undoable actions to 
your main file. Of course, you can 
always use the history palette or 
revert your file, but there'll be 
occasions when things don't 
quite go according to plan... 


10 | Create both images as space’ jpg and 
space2.jpg and embed them into your page as 
you did with the logo. To adjust the vertical 
alignment of the left-hand copy, select the cell and 
use the appropriate option in the Properties panel to 
bring this back to the top. 


13 | The background under the main copy will be 
embedded into the HTML table cells 
background. To create the file, duplicate the 
page_layout.psd file and hide visible elements 
overlaying this. To avoid ugly tiling, crop the cell, 
plus those below, to the bottom of the design. 


For a more efficient page you can use this 

graphic to determine the vertical dimensions 
of the row by embedding this into a cell. Click and 
drag along the row cells to select them all and enter 
the hex code for the orange (#FF9900) into the BG 
colour field. 


tt | For the Space Photos page title graphic some 
lateral thinking will save time later. This 
graphic will change depending on the page, so crop 
close to the lower edge but leave the left-hand 
boundary as wide as possible within the cell. Save 
the cropped file as page_title.psd. 


Use the Save for Web tool to convert this into 

the file 'bg.gif' and save into your site graphics 
folder. Back in Dreamweaver, select the main copy 
cell and use the browse button by the BG 
(background) field in the Properties Inspector to 
locate the file and embed as a background. 


As text goes over the top line, you need to 

create separate images for these that include 
the line. Remember to save these title components 
as new Photoshop files so you can re-use these 
elements for other titles, as you did with the Space 
Photos graphic. 


With this file created, you can simply overwrite 

the copy as necessary, convert into a GIF and 
replace confidant in the knowledge that the 
matching dimensions will not adversely affect the 
layout on other pages. Use this to create the Space 
Photos title GIF for your page. 


As the top horizontal rule image is affected by 

the titles, create the lower version first. 
Duplicate the page_layout.psd file and zoom in 
close to the ‘hr bottom’ layer. Crop a one-pixel-wide 
cross section and use the Save for Web feature to 
save as rule. gif. 


space photos 
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Due to the way the merged cells are contrived, 

you need to know how the row will be built. 
Instead of using the background colour as you did 
with the lower rule, insert the rule. gif into the 
outside and central cells, forcing their widths to 
match their containing columns (93,18, 93). > 
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Text and graphics continued... 


To frame or 
not to frame... 


Frames have long been debated 
among Web designers. Older 
browsers and previous search 
engines often had difficulties 
rendering or understanding the 
content. However, the sheer 
practicality such a feature allows 
has ensured their survivalas a 
Web design feature. Inline 
frames are a relatively new 
arrival and have only recently 
been offered more consistent 
support through the most 
popular browsers. Due to their 
practical nature, they are 
becoming more and more 
common for features such as 


our news scroller. 
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19 | Insert the title and sub-title graphics created 
previously into their particular cells and... oh 
dear, it's not looking too good. This is because the 
merged cells, although necessary to achieve the 
end result, are making it difficult for the browser 
to understand. 


So & So Poster Compa 


22 The final element you need to add to the page 
is the subtle link that appears in the top left of 
the page layout. This will provide a link back to the 

site's homepage. 


25 | Your page should now be complete, with 
content and images in place. Practise the 
techniques we've used here to recreate the 
homepage in a similar manner, omitting the 
navigation and Flash elements, which we'll look at 
later in this process. 


We left the central column unmerged just for 

such an instance. You can use invisible 
transparent GIFs with forced height attributes to 
help the browser understand the correct 
dimensions. Create a 1x1 pixel transparent GIF in 
Photoshop and save as trans.gif. 


The cell is currently occupied by the logo 

graphic, which makes it impossible to position 
the new element. However, you can split the cell 
providing a new container for this link by selecting 
the cell, hitting the Split Cell button and requesting 
two columns to be created. 


info@somndsodesign zouk Alimages & content 
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21 | Using a little maths, we've calculated that the 
row above the orange line should be 63 pixels 
high while that below needs to be 33. Add the 
trans.gif image and apply these dimensions to their 
respective cells in the central column. Preview in the 
browser and the problem's solved. 


SOAS DION 
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24 | You may need to rearrange the cell contents 
slightly if the graphic is placed in the wrong 
cell, and adapt the cell alignment options to 
position both the graphic and the << link to the 
correct positions. 


where digital 
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26 | The only problematic area here might be the 
positioning of the background, which crosses 
into the inline frame. Just remember to split this into 
two separate images that can be used as 
background for their respective cells. 


where digital meets deugn 


Although the inline frame will sit over the 

background, it's good practice to include this 
here too, for users whose browsers may not support 
this feature. For the full effect, you'll also need to 
embed the background into the iframe, which will 
be done next through CSS. 


Part 2: Adding more style 


Having added content and graphics, you can further develop your style sheets... 


Linking to CSS files 


The actual code that links an 
HTML file to a CSS file is 
contained within a part of the 
underlying code known as the 
head of the document. As 
anything contained in this 
section is invisible to the 
browser, you won't have direct 
access in Dreamweaver unless 
you toggle the option via 
View>Head Content. Various 
icons are then available above 
your design view for certain 
<HEAD> functions including 
your link to the CSS file, which 
can then be amended via the 
Properties panel. 


Making a 
hash of links 


During the production of a site, 
you'll often be including 
navigable links that anticipate 
the final design and site 
structure. To provide the 
behaviours of a link when 
formatting, you can use the hash 
(#) key to fake a link. This allows 
you to continue with developing 
the style sheet to provide the 
required attributes for such 
elements. After all, which came 
first: the page or the link? 


Link states 


An HTML link has numerous 
states, which are defined in CSS 
as a:link for a regular link, a:hover 
for when a mouse cursor is held 
over it, a:active determines when 
the mouse is actually clicked, 
and a:visited fora link to a page 
that has already been viewed. 


widrhe" 13" ><img 
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Pv) You'll have noticed by now that our HTML text 
is still far from our original designs. The linked 
style sheet offers some solutions. With the CLIENT 
heading in your page selected, click the small 
reference in the CSS Styles palette (Windows>CSS 
Styles). Repeat for the BRIEF heading. 


In the following definition window, set the 

font size to 10, the colour to #999999 and 
Decoration to None to remove the link underline. 
Click OK. Repeat this step for the a:hover state 
using the same attribute but using #CC6600 as 
the colour. 


NAWE RARE... 


‘Temporary copy to : 
illustrate how this page: 
will appear... B 
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indexhtm | untiedhtm | news.htm * 
chead> <link> 


+ Properties 


The next thing to do is fix the background 

image in the news.htm file, as any scrolling 
here would disrupt the page design. First, duplicate 
the style.css file to create news.css, then open your 
news.htm file and attach this new style sheet to 
your document (see ‘Linking to CSS files’). 


CE) Ca a) 
body» <tablep <tr <td> <div> 


» Properties 


To format links during the production phase 

of a site, you can use empty links using the 
hash (#) symbol. Select the necessary components 
in turn, such as the secondary navigation and email 
contact at the foot of the page, and enter a hash as 
the link address. 


The link's a:visited state will be the same as the 

a:link, and the a:active replicates the a:hover. 
Simply duplicate the existing states in the Edit Style 
mode of the CSS Styles palette. Right-click (PC) or 
Control-click (Mac) the reference and choose 
duplicate before selecting the relevant alternative. 
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8 | The background is part of the HTML <BODY> 
tag; move into Edit Styles mode and select this 
tag. Click the Edit Style Sheet button and choose the 
Background category. Use the Browse button to 
locate the background image and set the Repeat to 
no-repeat with a fixed Attachment. 


= Design 


Type: © Make Custom Sie claes} 
QO Redetine HTML Tag 
Ose css Selector 


Links inherit default (underlined blue) 

attributes, but this doesn't suit the design. To 
edit this, click the New CSS Style button on the 
palette and choose the Use CSS Selector option in 
the alert box. Select the a:link option from the 
selector options and click OK. 
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G The pipe dividers and copyright statement still 
have the default text attributes. Duplicate the 
a:link style choosing the Make Custom Style type and 
providing the name .subtext before clicking OK. You 
now have a matching style class that can be applied 
to the relevant text as with the CLIENT headings. 


9 | Click OK to return to editing the news.htm file 
and insert a table wide enough to force the 
sideways scroll. Add some temporary text. View the 
index.htm file in your browser and your scrolling 
inline frame should be operational, complete with 
fixed background. > 
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Part 3: Protecting your work 


Considering realistic copyright issues... 


Common sense 


Due to the global audience of the 
Web, policing copyright theft is 
(practically) impossible. 
Providing excessively large 
graphics might show the finer 
details of yourcreative work, but 
it also leads to excessive file 
sizes, awkward page rendering 
and, of course, improved 
chances of your images being 
‘borrowed’ by others. Keep your 
attributes at realistic 
dimensions, offering to provide 
more detailed versions on CD by 


personal request. 
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Eta Copyright is often seen as a grey area on the 
Web as the very act of viewing a page 
automatically means that your images and content 
are being downloaded onto a visitor's browser 
cache. However, there are a few common sense 
things you can do to protect yourself. 


space photos 
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4 | If someone's going to take an image from 
your site, the most common method of doing 
so would be to right-click (PC) or Control-click 
(Mac) an image and choose the relevant Save 
Picture option. 


Before you despair, there's one saving grace of 

displaying work through a Website. Most non- 
Web designers forget that a monitor is unable to 
display images at a greater resolution than 72dpi, so 
if you use Photoshop's Save for Web feature, your 
images will be automatically downscaled. 


We've included a copyright statement as part 

of the footer in our page design. To insert the 
correct symbol through Dreamweaver, delete the 
temporary ‘c' we used in the design and choose 
Insert>Special Characters>Copyright. 
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Dreamweaver provides the JavaScript 
necessary to disable the right-click action 
as one of its default Code Snippets 
(Window>Snippets), which will go some way to 
protecting your files from novice users. 


Add to this the fact that most images’ colours 
have been indexed — in RGB mode this means 
that even the largest, most realistically sized images 
will be unusable for any print work — and they'll 
have limited potential even when used within other 
screen-based projects. 


space photos 
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Similarly, you could do what the online image 
libraries do and plaster your logo or Web 

address over any images, instantly branding them 

your own. Unfortunately, the end results would 

be rather ugly. 


However, both the Mac and PC operating 

systems have features that allow a user to 
take screen grabs, which can then be imported into 
any graphics application, from where the images 
can be extracted. 


Sif aneeshatti 


ga There are online methods of protecting your 
work if you're still nervous about uploading it, 
but these can be expensive and often can't work 
around the save target or screen grab. Some online 
research will provide more advice than we have 
space to offer here. EEE 


Win LaCie’s too CD & DVD burners 


Your chance to win one of two CD/DVD burners from LaCie... 


A his month we've partnered with LaCie to offer 
| T you the chance to win one of two CD & DVD 
| burners worth £658. 

What are you waiting for? Just answer one easy 
question and enter our competition today. You never 
know, you could be sending out your portfolio on CD 
sooner than you think. 


First prize: LaCie Dupli-121 

This system intuitively combines an autonomous 
CD duplicator and a connectable CD-RW drive to 
perform several recording functions ina variety 
of environments. 

The Dupli-121 has an easy-to-use interface and 
there's no software installation required to get you up 
and running — CD duplication can begin with the touch 
of a single button. 

Four LEDs keep you informed of recording status 
and error information, and this three-in-one device 
features innovative U&l technology developed by 
LaCie, providing one FireWire port and one USB 2.0 
port for easy connection to Mac and PC systems. 

This system is ideal for copying and distributing 
digital data in home offices, small businesses, 


advertising agencies, video/gaming environments 
and architect and design firms. 


Second prize: LaCie FireWire DVD-R/RW 


With the LaCie DVD rewritable drive, you can assess 
the needs of your project to decide the type of media 
that best suits you. Offering the ability to write to 
DVD-R/RW and CD-R/RW media, it gives you full 
project control. 

Simply connect the LaCie DVD rewritable drive via 
either FireWire or USB 2.0 and start transferring your 
projects to disc straight away. The drive is 
automatically configured, so the drive mounts to the 
desktop as soon as it’s plugged in. The LaCie DVD 
Rewritable Drive can be easily shared between 
workstations too. 


The Question 

To win, complete the following phrase: FireWire DVD- 
R/RW can connect via FireWire and...? 

To Enter 


The easiest way to enter is via our Website at 
[w] www.computerarts.co.uk/competitions. Or you can 


click the Competition tag on the Contents screen of 
our cover CD, then enter LaCie as the competition 
name, and fill in the rest of the form. Click Submit 
Entry. Alternatively, send your answer on a postcard, 
along with your address and a contact number to: 
LaCie Competition, Computer Arts Special, 30 
Monmouth Street, Bath, BA1 2BW. 


The Rules 


The competition closing date is 19 March 2003. 
Employees of LaCie or Future Publishing, or any of their 
agents or families, may not enter. Multiple entries will 
not be accepted. The editor’s decision is final. There are 
no cash alternatives. No other correspondence will be 
entered into. Please indicate if do not wish any of the 
companies involved in this competition to contact you 
with further offers. We wont pass details on to third 
parties. Competition is open to UK residents only. 


Flash MX winners — issue 40 
J Ulrich from Zuerich, C Watt from Kingsley, Australia 
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interactivity 


The next stage of your portfolio's design is to 
make it interactive. Sit tight while we show 
you how to make your site dynamic... 


tatic portfolios are two a- 
penny these days. To get 
yours noticed you need to 
add a little interactivity to it. 
Using Macromedia Fireworks you can 
add some interactive buttons to your 
site, and with Dreamweaver's templates 
you can ensure that updating your site's 
content doesn't get to be a drag. 
Navigation is key, so make sure you 
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hold your viewer's attention by giving 
them plenty of things to click on. 

On page 37 we'll show you how to 
create information that pops up ina 
separate window on yoursite. > 


io Files on disc 
SS The files needed to support this 
tutorial are in the Tutorial\Web 


project folder on the cover CD, 


34 
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Part 1: Steering you through the navigation 


Using Fireworks to develop the dynamic navigation... 


Alternative 
navigation 


The navigation system we've 


created here is intuitive and 


usable, but to create such a 
feature by hand would be 
impossible for the novice coder. 


contact 
pritt}-parkaging | photography | video 


oT 
profile} portfolio 


Ifyou don't have access to 
Fireworks, you might want to 
consider using Flash for similar 
results, although this may not be 
as convenient to update. 


& Open nav.png in Fireworks and note the 
colours used. The main entries use the hex 
colours #666666 and #CC6600 for Normal and 
Over states while the sub-menu uses #999999 and 
#CC6600. Hide the sub-menu layer as this is 
provided for reference only. 


4 | Click Done to exit the Button editor and repeat 
the process for the Portfolio and Contact 
buttons remembering to change the Up state colour 
of the Portfolio to #666666. 


Complete the text and link fields using the sub- 

menu titles of print, packaging, photos and 
video along with their corresponding link addresses 
of print.htm, packaging.htm, and so on, before 
clicking on the Appearance tab. 


ene 
+ profile portfolio contact 


To create a button, select Profile and choose 

Modify>Symbol>Convert to Symbol. Provide 
a suitable name and select the Button type option 
before clicking OK. 


Select each button in turn and provide 
alternate text and links to profile.htm, 
portfolio.htm and contact.htm respectively through 
the Properties panel. We've also set the Button 
Export Options to GIF Web 216 to optimise the 
final conversion. 


contact 


portfolio 


Double-click your new symbol to launch the 
Button editor and move over to the Over state. 
Click the Copy Up Graphic button to replicate this 
and change the colour to #CC6600. Copy the Over 
state to the Down and Over While Down tabs too. 


With the buttons complete, you need to add 

the drop-down menu to the Portfolio option. 
Select this and choose Modify>Pop-up Menu>Add 
Pop-up Menu to add the feature and launch its 
dedicated editor. 


Choose the HTML Cells option with a 


Horizontal Menu. Set the font to Verdana, the 
size 10 and centre the text. Leave the cell colour set 


at white (#FFFFFF) and amend the Up and Over 
state text to match our design colours of #999999 
and #CC6600. 


print 
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Move onto the Advance tab and keep the Cell 

Width and Height fields set to Automatic with 
no Cell Padding, Spacing or Text Indent. Remove 
any border attributes if these are in place. 


Essential files 


Once completed, the generation 
of your navigation will create 
numerous reliant files such as 
images, HTML and scripts. Keep 
your site tidy and manageable 
by deciding in advance where 
such files can be stored. We've 
placed our navigation graphics 
within a dedicated folder 
(../graphics/nav). Another 
essential file is generated with a 
js extension — this contains the 
core JavaScript necessary for 
the navigation to work, so make 
sure this isn't moved or deleted. 


10 | Choose the second option on the Position tab. 
This positions the menu directly below the 
Portfolio button, which in turn triggers this event. 
Click Done to exit the Editor and return to your 
main file. 


weve digital mee 


13 | Save this to generate the necessary 
components. Open the index.htm file in 
Dreamweaver and place the cursor in the cell that 
will contain the navigation. Then click the Fireworks 
HTML option on the Common tab of the Insert bar. 
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rm An outline of the menu appears in blue, which 
you'll notice is positioned too far to the right. 
Simply click and drag this over to the correct 
position. Use the Preview in Browser option to 
check your navigation in action. 


where digital meets design 
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14 Browse to locate the nav.htm file generated in 


Fireworks. Leave the option to delete the file 
after insertion unchecked so you can use the same 
navigation in your content page. Click OK and the 
navigation is integrated into your file. 


Part 2: Dreamweaver templates 


Creating new pages from a template... 


Why use 
templates? 


As wellas allowing us to easily 
create new pages with consistent 
layout, Dreamweaver templates 
have the advantage of being 
constantly linked with any pages 
created from them. This means 
that any future changes made to 
your template will be 
automatically passed on to these 
siblings. This saves time because 
you can change an element once 
ona single template file to 
automatically update your entire 
site. Used in combination with 
CSS, you can effectively change 
the entire appearance of your 
site by amending only the 
Dreamweaver template and the 
associated style sheet. 
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a Your generic content page is now almost 
complete. By configuring this to behave as a 
template, you'll be able to create new pages using 
the same layout requiring you to only amend copy 
and title graphics to create new pages. 


are al 


+ Insert 


2 | Choose the Templates tab on the Insert bar 
and click the Make Template option. Provide 
a Save As name of Content and click Save. Your file 
is now saved as content.dwt (Dreamweaver 
Template) within a new Template folder in the root 
of your site. 


Use the Fireworks Quick Export option to 


to your site folder keeping the file name ‘nav.htm’. 
Check the Put Images In Subfolder option and 
create a new folder called ‘nav’ within your site's 
graphics folder via the Browse button. 


ee 
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space photos 


15 | Repeat the previous two steps with the 
untitled HTML content page to insert the 
navigation at the head of your page as defined by 
the original design. 


space photos ™ 
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3 You can now determine which content is to be 
editable or static. Editable content is often 
page copy and title graphics, while static elements 
are usually design or layout elements. Select the 
main title graphic (Portfolio) and click the Editable 
Region button on the Insert bar. > 
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12 | choose Dreamweaver>Export HTML. Navigate 


36 | Tutorial Creating an online portfolio 


Dreamweaver templates continued... 


Make the most 
of your assets 


Open Windows>Assets for quick 
access to categorised 


portfolio” contact 


components used in your site. 
This includes any templates, 
graphics, Shockwave files 

or movies as well as more 
practical elements such as 
colours and links. 


Name: [SabTitel_ 


“This region wl be editable in documents 
‘based on this template. 


4 | Provide a logical name such as MainTitle and 
click OK. Do the same for the Photography 
graphic calling this SubTitle. Don't worry if your 
layout becomes disrupted as the added visual aides 
cause this. 


As this will be your profile page, save it as 

profile.htm in the root of your site and close 
the file. You now need to repeat this process 
creating all the pages necessary for the site apart 
from the homepage. First, create the portfolio.htm 
and contact.htm files for those pages. 


10 Once you've ploughed through adding 
content to your site, you'll be able to test the 
site in the browser and fine-tune any details 
impossible until now. Open the template file and 
create the home link to the actual index.htm file. 
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portfolio” contact 


To produce photo; : 
verbising campaign 
for a new documentary film ‘Space’: 


Do the same for the main content and graphic 

cells by selecting the cells individually — hold 
down the Control (PC) or Option (Mac) keys and 
name them Content and Images respectively. 
Repeat this for the secondary navigation cell, 
calling this Nav2. 


bY Ge Edt wen Wuet bedty Text Gonmends St Window Gee 


8 | Then create files named print.htm, 
packaging.htm, photos.htm and video.htm to 
contain the information for the Portfolio sub-pages. 
Once these have been created, you'll notice the 
Dreamweaver site manager listing these new pages 
ready for further work. 


space photos: 

cuent{ 

‘G9, So Poster Company, 
com 


i eRIEF; 
} To produce photo: y to be used ort 
fa Vi 


new ertising campaignt 
for a new documentary fim ‘Space’: 


Link 


Eomat| Pasgrch (vA 


On some pages the Images column is aligning 

to the vertical centre of the cell by default. 
You want this to align to the top, so revise it 
through the template too by selecting the cell and 
making the necessary adjustment through the 
Properties panel. 


Ezlupaate Page vtben Terptate Changes 


G Your template is now complete and ready to 
use, so save and close the file. To create a new 
page based on your template, choose File>New. 
Access the Templates tab, select your site and 
choose the Content template. Click on Create to 
generate the new page. 


SOBSO DESIGN 
FREELANCE DESIGNER 


9 | As the pages were generated from the same 
template, they all have the same content. 
Open them individually making relevant changes to 
copy and graphics. Remember to use the Photoshop 
files you saved specifically for the creation of the 
title graphics. 


space photos: 


CLIENT: 
So Poster Company: 
’ t 


BRIEF: 


12 | Finally, revise the email address at the bottom 
of the template using the Email Link option on 
the Insert panel. Once you've completed your 
changes, save the file and Dreamweaver will prompt 
you to update reliant pages. Click OK and your 
changes will be applied throughout your site. 


f 


Part 3: Pop-up windows 


Providing more detail than might be possible through the regular page... 


Naming windows 


When creating pop-up windows, 
naming windows provides the 
generated browser window with 
an identity that can be 
referenced. This is useful on 
occasions when you might be 
opening multiple windows of the 
same dimension. By referencing 
the same name with the event 
link, new content will be loaded 
into the same window, which 
means that you won't be taking 
over your user's desktop with a 


mass of pop-up windows. 


8th Glo 


Coca view 


a) We've made reference on the Portfolio pages 
to enlarge the images, which we'll achieve 
through pop-up windows. Create a new blank page 
in Dreamweaver saving this as photo1.htm. Place 
the space1_big.jpg image on the page 


Attributes: [[] Navigation Toolbar [] Menu Bar 
0 Location Toobar (CO Scrotsars as Needed 
CD Status Bar Oy Resize Handies 


4 | With the image link selected, click the plus (+) 
symbol in the Behaviours panel to display 
options available for this event. Select the Open 
Browser Window behaviour to launch its editor. 


reworks HTML 


+] -| <img> Actions 


Events ‘Actions 
onload [Open Browser window _ 
onAbort 


You may find the actual event that triggers the 

pop-up window is set to something other than 
the required mouse-click action. Select the 
behaviour and you'll notice an arrow appears by the 
event action — click this for other options. 


IS STEER TT 


‘Iie: [United Document 


Background Image 


Backgound [| 


Tet Vieted unke [) 
trke | Aotve Linke [7 


Left Manger |0 


Margin Widthe 0 
Margn Height 0 
= 


Image Transparency 100% 
Trampaert Opaque 


Tog Marge (0 
Documert Encoding [Wester (Latet) 


Tracing Image. 


Document Folder. C\Documerts and Settings\Chris Schmict\My Docu 
Folder C\Documerts and Settings\Chvis Schnit\My Docu 


2 Enter the file's page properties via 
Modify>Page Properties and set all the margin 
widths to O ensuring the image is snug against the 
browser window. Make a note of the image 
dimensions (500x317) before saving and exiting 
from the file. 


space photos 


CuENT 
808.50 Poster Company! 


PREF 
b photography to be used ort 
Poster advertising campaign 
jew documentary film ‘Space’: 


S10 neshagestapcetpg EQ At otek onus |e] 
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3 | Open the photos.htm file from where you'll 
prompt the pop-up. Select the corresponding 
thumbnail image and create an empty hash (#) link. 
If unavailable, access the Behaviours panel in the 
Design palette via Windows>Behaviours. 


[ee neets) Medi Med: Seg 
Seer 


Attributes: [7] Navigation Toobar ([] Menu Bar 
(7) Location Toolbar CO Scrofhars as Needed 
(CO Status Bar CO Resize Handles 


G Use the Browse button to locate your 
photo1.htm file and enter the image 
dimensions you noted earlier (500x317). As you just 
want an empty browser shell, leave the other 
options unchecked. See our margin note about 
‘Naming windows', but leave the Window Name 
field blank on this occasion. 


+,| —| <ima> Actions 
Events Actions 


(onClick) Open Browser Window 


+ Code 
Tag Inspector | Snippets | Fieference 


Choose the (onClick) action for this event. This 

ensures the pop-up window will only be 
created when the image link is actually clicked and 
not when the page loads or if the cursor is passed 
over the image, for example. 


G Click OK to return to your page. Select the 
image link again and you'll see the Open 
Browser Window function available in the 
Behaviours panel of the Design palette. 


eee eee 


Save the file and view in the browser to see 

your pop-up window prompted when you 
click on the thumbnail. Repeat for similar 
thumbnails throughout the portfolio section 
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Part 4: Wrapping up the homepage 


Putting the finishing touches to your welcome page... 


Padding images 

You may have noticed the Vspace 
and Hspace options in the 
Properties panel with your Flash 
options. This is also available 
with graphics and provides 
horizontal and vertical padding 
around such objects. It's useful if 
you want to wrap text around an 
image while leaving a natural 
divide between the two objects. 


Elastic tables 

If your news table created here 
starts to stretch uncontrollably as 
it contains irregular content, you 
could use the spacer gif trick we 
used during the initial production 
of our page layouts. Insert a row 
above or below the main content 
to contain a one-pixel-high 
graphic with a forced width to 
match that required by each of 
the table cells (318 pixels). 


Open the homepage (index.htm) and copy the 

intro.swf file from the CD into your local site. 
This file has been created to the dimensions 
specified in our original Photoshop design layout so 
it should fit neatly into your created Web page. 


Select File Name From: @) Fie system 
‘OData Sources 


...whete digital meet 


ofile portfolio contact” 


Embedding Flash files usually means long and 


complicated code, but Dreamweaver makes Navigate to locate your saved intro.swf file. 
the process as simple as adding an image. Place the 

cursor in the appropriate cell and choose the Flash 
button from the Common tab of the Insert panel. 


Keep the relationship of the file set to 
Document to ensure links embedded into the Flash 
movie will be compatible with the site, and click OK. 


</tabbde><)ea> 
</ee> 
<tr> 

td widhhe "Sa" yambapsc/ td> 


«ed pe"18")<img are="graphics/trans.gif* width="1" height=" 
etd widthe"S1E"><object Classide"clsid:D27CDB6E-AE6D-11ct-96Be— 
/download.macronedia.com/pub/shockwave/cabs/flash/swflash. ct 


<paren name="movie” values “graphics/intro.swf"> 
<param names"quelity” value=“high"> 
<embed sxce"graphics/intro.sw2” width="3ié* height="168" qual: 


i profile” pork 


4 | Once in place, there are a number of options 
available through the Properties panel. All the 
essential attributes, such as dimensions, will be 
automatically configured, although you may need 
to tweak the object or cell alignment if necessary. 


Any changes made to the content of the inline 

frame must be made to the referenced 
news.htm file. If you followed the steps earlier, 
where we configured the style sheets to fix the 
background, you should see that wedged in place 
towards the upper left of the screen. 


The news scroller is the final element of the 
homepage that could be improved. Click 
the Show Code and Design Views button to view 
both modes and select the news scroller cell to jump 
to the relevant code. Note the inline frame 
dimensions (318x168). 


A useful addition to Dreamweaver Mx is the 

option to enter the location of the original fla 
file into the source (Src) field. Making this available 
provides tighter integration between Dreamweaver 
and Flash allowing quick edits to be made via the 
Edit button. 


wins Oscar for bel 


‘Special Magazine by SO8 


he 
‘See the photography, Oprovidedfor See our image created tq 
the award winnin, > __itips from the professior 


says 


+ Properties 


Format | Parapaph 3] Ak |Oetaut Font 


tink | ~OE9 Ton Let 


8 | To make full effect of the horizontal scrolling of 9 | To place the table directly against the top and 
the inline frame, insert a one-row, three- left edges of the page, go to Modify>Page 
column table at a width of 940 pixels with Cell Properties and set all the margin properties to O. 
Padding set to 3, Cell Spacing at 0 and no border You'll notice the cells match the background 

(0). These dimensions should provide a table three precisely and that content entered is buffered from 
times the width of the frame. the edges via the cell padding. EE 
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Hie nadia video 


and finishing up 


Adding video to a site can be tricky if you've 
never done it before. Follow our tutorial to 
get the best results... 


ore and more designers are | beusing. Forexample, if your clients 
adding moving images to tend to have Broadband connections 
their portfolio of work and then you may not have to compress 
skills on offer. video clips. But if your users have dial- 
However, when working with video up connections, you will. > 
clips fora Website there are certain 
factors you need to bear in mind, such as io Files on disc 
. compression and playback. S=/ The files needed to support this 
¥ You also have to think about what kind tutorial are in the Tutorial\Web 
project folder on the cover CD. 


of connection your viewers will typically 


ary fet 


Illustration: Identikal [w] www.identikal.com 
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Part 1: Working with video 


Looking at different methods of incorporating moving imagery into your site... 


Bandwidth 
limitations 

Video, like sound, generally 
means large file sizes. This can 
be problematic with Web content 
even if you know your audience 
has Broadband connections. If 
you really need to include video 
on your site, consider streaming 
options such as QuickTime or 
Realas these will provide more 
accessible and reliable options. 


Rotoscoping 


Another technique more suited 
to moving effects is rotoscoping. 
This is an old animation method 
traditionally created by a 
dedicated piece of equipment 
called a rotoscope, which plays a 
movie frame by frame onto an 
animator’s art board allowing 
them to trace outlines. Flash is 
the ideal tool forthis as you can 
import the original video clip and 
trace round the moving object 
before deleting the original 
movie. This can leave some 
impressive results at a fraction 
of the file size. 


@ As So&So Design includes video in its 
portfolio, the best way to showcase this 
through the site would be through an actual video 
clip. Locate the swimmer.mov QuickTime file from 
the CD and save it to your computer. 


4 | Use File>Import to locate the original 
QuickTime movie and click OK. Choose 
Embed Video In Flash from the Import options and 
click OK again to access the settings dialogue. 


This video requires 321 frames to display its entire length. 
The selected timeline span is not 


hard Ing iesgmoaucaia micaurae 
fequie pot frames 
inserted into the timeline span? 


[Don't show me this message again. 


— 


Check the Synchronise Video To Flash 

Document option and click OK. Leave Flash to 
process the conversion. On completion you may be 
prompted to extend the timeline to allow for the 
extra frames necessary. Click Yes to return to the 
main Flash environment. 


Cee eek ee et ee ee ELD) 
(gt) i a. 


body Leftsargis="0" topmargin«"0" sarginuidche"0" sargiaheight="0"> 


<Peody> 
<a> 


You could embed this into your related pop-up 

window via the Insert>Media>Plug-in option, 
but you would need to convert the QuickTime 
movie into something a little more deliverable than 
the 4.3mb file it currently is. 


‘B)Syncheorice video to Macromedia Flash document lame tate 
Nuanbe of video frame to encode permuerber of 5 >t 
“Maciomeds Fath hemes 


& The ede in tes fe can nat be imported. 


The settings you configure here have 

significant consequences on the quality of your 
conversion. Quality determines the amount of 
compression used, with 100 being the best quality 
but highest file size. Set this to 70. 


Centre the conversion to your canvas and save 

the file. Test the movie via Control>Test Movie 
to preview the movie. Use the Bandwidth Profiler 
(View>Bandwidth Profiler) to gauge how effective 
your conversion will be. 


Sea (20m | fd) x [240% —|theigh) | 
wien Coie} (Eten) 


3 As an alternative, you could convert the clip 
3 | into the Flash SWF format. Create a new Flash 
file with dimensions of 320x240 at 30fps matching 
the original file settings. 


Movie size: 320x240 pivels, 4378.7 Kb 
~ Length; 10,68 secs, 3010 frames/sec 


4 aes Peet CR 


Scale ’ F100 | % 
eat j 100, 


MSunchronize video to Mactomedia Flash document frame rate 


6 | Keyframe Interval decides how frequently 
complete frames are stored, and it can provide 
some useful controls over movies with little actual 
motion. As our clip has continuous movement with 
the water, set this to the midpoint at 24. Leave the 
scale at 100 per cent to match our original movie. 


Preload: 3559 fr (118.6 s) 
Settings: A 
Bandwidth: 4800 Bs (160 B¢tr) 


State: ) 
Frame: 151 
1KB (1219 B) 
Loaded: 100.0 % (321 frames) 
606 KB (620800 B) 


9 | The process of testing the movie automatically 
generates the SWF conversion into the same 
folder as the parent FLA file. Copy the SWF into 
your site graphics folder and embed into the video 
pop-up window as we did with the homepage 
Flash file. 


Part 2: Getting into forms 


Using HTML forms to provide feedback methods for your site visitors... 


Processing forms 


The most common method of 
processing information sent 
through HTML forms is via CGI, a 
server sided scripting language. 
Before you can make full use of 
your form, you'll need to check 
with your hosting company as to 
how this has been configured 
and what additional data will 
need to be included with the 
form so as to correctly process 
what is being sent. 


Intelligent forms 


Ever wondered how your browser 
often anticipates content used in 
forms? The answer lies in the 
names given to each of the form 
elements. Each time you 
complete a form, your browser 
remembers what you entered into 
a specific field by the name it has 
associated. Using this logic, keep 
your form element names as 
generic and obvious as possible; 
if your email field is called simply 
‘email’ like on many other forms, 
then you have improved chances 
of intelligent input. 


SO&SO DESIGN 
FREELANCE DESIGNER 


ae Our contact page is looking rather sparse and 
offers only the most basic method of allowing 
site visitors to get in touch. By including a form in 
this page, we can offer more usable features that 
will help the user communicate with you. 


> Temetines 
> Results 


4 | Select each of these form elements in turn and 


provide logical names. This is important for 
understanding the information sent by the form. 
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subscribe to SO&SO “er 
yes; 


contact 1s at> 


<foump «div» <po cimput> 


> Toaelines 
» Results 


Radio buttons provide a single choice across 
multiple options. Add a couple for an optional 
newsletter subscription. Give each the same name 
so the form can relate the two, but provide unique 
yes/no values. Opting for the checked initial state 
determines which button is selected by default. 


"orms| 


Forms if i 
cea | A crectcon [6] 


Open contact.htm in Dreamweaver and 

access the Forms tab within the Insert panel 
for available options. Place the cursor within the 
content cell and click the initial Form button to 
create the necessary container marked by a red 
dotted line. 


which areaS¥6f,SO&SO's work is of 
interest to you? 


> Timelines 
> Results 


Use the same process to add checkboxes 
requesting areas of So&So's work in which the 
user is most interested, providing supporting text 
and names for each element as you did before. 


8 | Finally, add a couple of buttons to allow the 
user to submit or reset the form. The options 
available in the Properties panel should be self 
explanatory to you by now; just remember to amend 
the button label to add your own text description. 


OTT LICL 


Our initial fields will prompt a user to enter 

their name and email address through a text 
field. First, create the text labels by typing Name 
and Email onto their own lines. Next, position the 
cursor to the right and click the Text Field button 
from the Insert bar. 


nnn QUE COMMENtS: 


soins $s08ndsodesign.couh 
dO S30 nda ceri s0.u) 


» Timetines 


G Adding a comment area uses a similar 
principle; choose the Textarea option. There 
are additional options available in the Properties 
panel to control the dimensions, but be sure to 
check your results because different 
browser/platform combinations handle such 
information differently. 


S$O&SO DESIGN 
FREELANCE DESIGNER 


The form will need further information, such as 

the method and action location, which can 
only be obtained from your hosting company 
(contact them for this). Once in place, you'll have a 


% 


much more impressive and effective contact page. > 
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Part 3: Getting noticed 


Improving your chances of being seen by a larger audience... 


Robots, spiders and 
crawlers, oh my... 


In addition to Meta information 


embedded into the page, you 


</p> 
<posubscribe to SC éamp;SO newsletter?<br> 
yes: 
<input name="newsletter” type="radio” va 


can make your site more visible 
through the inclusion of a 
robots.txt file held in the root of 


where digital meets desi 


your site. This text file contains <br> 


information designed to attract posttotie 
and inform the programs PTR 
employed by search engines — 
often known as robots, spiders 
or crawlers — as to how often the " it $0850 DESICN 
site is updated and when it - : 
should revisit to re-index the 


So & So Design is a creative ager j , 
uses technology to push the bound : S8WWASORSO's work is 
A n i interest to you’ 


site for the latest version. Check 
out [w] www. robotstxt.org for 


By this point the site is virtually complete. All A document's title is displayed in the title bar To amend this you'll need to plough through 
the content and graphics are in place, and of the browser and determines any text your site, once more entering the relevant 


more info on this. 


navigation functions and Flash movies are descriptions when a page is saved as a document. content into the title field that's contained within 
integrated seamlessly. All you need now isto ensure These are also important for allowing search engines __ the invisible <head> code of your Web page. 
that it'll be found when uploaded to that mass of to recognise your pages. Untitled Document isn't Fortunately, Dreamweaver provides access to this 
files that comprises the Internet. going to be help much... below the Insert panel. 


‘grephics/nav/nav_ri_cS_f4.gif")"> 
7 rable widthe"732" bordere"0" aligne"center” celipaddinge"0" 4 
ag, <tr> 
79 <td colspans"2"><div aligne"right"><img src="graphics/logd 
height="101"></divo</td> 
<td> éabsp,</td> 
<td colspane"2"> énbsp;</td> 
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+ pepuptiickThzcugh = “heeps// 
lew. computerarts..co,uk/magazine"¢) 
ceorapt sro=*/sncludes/popups/popup.3e"></sorspt> 


<eivlercompurer Arte Online: Fhotoshop, Web, 5D, animation, DV</titier 
\ci--The ultinave site tor designers: tree downloads, in-depth 


MX balloons 


ENT: tes ante, 
CLIENT: » Photo, shep, 


ter Arts Specials Magazine flasn, dreameeaver, 24. 
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ays in which you can 
Scromedia's suite of 


5 | Meta tags are another invisible element 6 | Ideally these should be added to all your 
4 | Try to be consistent when naming your titles, contained within the <head> of your page's pages, but practically it's a good idea to at least 
maybe taking the site structure as a guide. If a code. The most common of these provide keywords _ include these with your main pages, such as your 
search engine was to return multiple resultson your —_ and descriptions relevant to your page that, Home, Portfolio and Profile pages. Open your 
site, you want a potential visitor to have a good idea _although possibly invisible to the browser, are crucial homepage (index.htm) and access the Head 
of which page is most relevant to them. for allowing search engines to understand your site. element within the Insert panel. 


SO8SO DESIGN 
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Click the Description option to be provided 8 | Use the Keywords option to enter the kind of 


with a form in which you can provide a words potential visitors might use in search g Once these are in place, you'll need to be able 
suitable description of your site and organisation. engines to find the services you offer. Separate to see your page's head content. Activate this 
Keep this short and concise — waffle won't impress a these by commas and try not to exceed around via View>Head Content to have access to a number 
search engine and too lengthy an entry might lead 30-40 words or you might face exclusion by some of icons representing the various components 
to your site being ignored. search engines. included. If necessary, edit via the Properties panel. 


| 


Part 4: Publishing your site 


Uploading your site to a server... 


FTP 


Data transferred to your server 
through Dreamweaver uses the 
File Transfer Protocol (FTP) 
although there is dedicated FTP 
software such as WS-FTP or 
Cute FTP should you require an 
alternative. Although Web 


professionals will make frequent 


use of Dreamweaver's built-in 
FTP capabilities, most will also 
have such a dedicated tool for 
more control over a file's 
permissions than is accessible 
through Dreamweaver. 


@ Template 
1 


a contact,{ 


1 | With our site now complete, we're just about 
ready to upload the files to the hosting server. 
But, first, we need to check that everything works as 
planned. Access the Site panel (Window>Site) and 
select the Check Links Sitewide option from the 
Sites menu. 


Access [FTP 


FTP Host {to soandeodesign co.uk 
Host Directory ube Fini! 
Lo ne Ga 
Posrwort see eeene Bisa 
luce Prssive EP 
Cle reves Crome Sveroe) 
[lune 58h encrypted secige loon 


Dasrtomatcaty spine fies to server on save 
(Check In/Out [] Enable Fle Chect:th and Check Out 


4 | Once you're happy with your site's 
performance and compatibility with the 
browsers, you can upload the files. You may have 
configured your site definition when you first 
started this project, but if you need to add or edit 
your remote info, do this through Site>Edit Sites. 


Piomrar: oh ete ie 
[Micros Internet Explores 4.0 
| Microsoft Internet Explorer 5 5 


Dreamweaver's Results palette opens with 

any erroneous links highlighted. Use the other 
tabs to run similar reports for basic Browser 
compatibility checks. 


5 | With your local and remote configuration 
complete, uploading your site should be as 
simple as selecting the root folder in the Site panel 
and clicking the Put button, which will prompt you 
for confirmation of the action. 


were digital meets design 


Once your site has been uploaded, it's 
available to the world through your site's 
domain name. 


To view and access files on the remote server, 

use the drop-down option at the head of the 
Site panel. You can download files from the server in 
either Local or Remote views by selecting the 
relevant file and clicking the Get button. 


Although Dreamweaver's methods of 
validating your site are reasonably 
comprehensive, the most realistic method of 
checking your site is to view it directly in the 

major browsers. 
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G However, depending on the size of your site 
and the stability of your Web connection, you 
may want to upload larger files individually. This is 
done in the same way by selecting the file and 
clicking the Put button. 


UH 
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9 | For access to both Local and Remote views at 
the same time, use the Expand/Collapse 
button to split the screen into two panes. This 
provides access to remote files on the left and local 
content on the right. > 
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Publishing your site continued... 


Help yourself 


Ifyou need more help with 
Dreamweaver, check out the 
online help files — they're 
remarkably comprehensive. If 
your answers can't be found 
there, try the Macromedia site, 
which contains not only practical 
advice but also a wealth of 
extensions that can be bolted 
onto Dreamweaver for additional 
features. And if you still can't 
find the right answer, take a 

trip to the Computer Arts Forum 
site, from where you're sure to 
get a response... 


An essential feature Dreamweaver provides is 

the ability to compare content between your 
local and remote versions. This is particularly useful 
when you've amended numerous pages and may 
have lost track of what's been changed. Choose 
Site>Synchronise from the Site panel. 


If you've got the screen real estate, we suggest 


you move your Site panel over to the left of 


the Dreamweaver interface. As well as allowing for 


more room to view your files as your site grows, 
you have more space on the right to share across 
other palettes. 


‘Synchronize: | Entire ‘SO&SO' Site 


Direction: | Put newer files to remote = 


[Delete remote files not on local drive 


prierd 
{A motion video use a backdrop for 
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Choose your Synchronise option and 

determine the direction of the comparison. |f 
you're absolutely sure your local version is working 
correctly, you may choose to check the option to 
delete remote files not on the local drive. This will 
clear your server of excess content. 


eet yh ontte [age a) 
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14 | Also, don't forget the options available to you 
through Dreamweaver's preferences 
(Edit>Preferences). The Site category available here 
allows you to fine-tune your FTP settings should 
you be dropping your connection too frequently. 


[ Seelog } | Cancel 


Click Preview, and Dreamweaver will take a 

minute to compare your site versions. On 
completion you're provided with a list of relevant 
files. Decide whether they're all required and click 
OK to initiate the transfer. 


Access [FT 
! Deogn fetes FTP Host tt. track. co.uk 
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i Login [tracks "| eid 
Besewort [eerecege false 
lure Passive ETP 
Cle rrent (Gemasarees) 
(D)Use Sse encrypted secure login 
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15 | For users who may be experiencing connection 
problems behind firewalls, you should do the 
following. In the Site Definition options (Site>Edit 
Sites) check the Use Passive FTP option under 
Remote Info. If this doesn’t work, ask your network 
administrator for the Firewall Settings, which can 
also be configured here. 


Part 5: Hit me 


Attracting visitors to your site... 


1 | Creating and uploading your site won't 
guarantee visits. If the search engines don’t 
know of its existence then it'll be ignored. 

There are various online services, such as 
NetMechanic.com, that provide free registration 
to the major search engines. 


‘Share your place on the net with us. 
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Despite the number of online services, most 

professionals still prefer to rely on the manual 
method of visiting a search engine's Add URL 
page. Although this is more time-intensive, you'll 
have a little more assurance that your site has 
been registered. 
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Congratulations, your work now has a global 

audience! With the site uploaded and 
registered, remember to keep it up to date and 
promote it as part of your email signature, to related 
forum or newsgroups and, more generally, by telling 
people you meet at the bus stop... 


Climb into the Director's chair with Toon Boom Studio V2! We've just added a 
production that lets you dive right into the action and take total cinematic control of 
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3D IN PHOTOSHOP We show you howto create stunning 3D 
effects - directly within Photoshop 


WEWORKFORTHEM PROFILE Mark Cina and Mike Young feel 


the need for speed — just one of the reasons for their success 


BROADBAND DESIGN Now broadband is finally in the 


mainstream, what does it mean for designers? 


TWO FULL PROGRAMS Get your hands on the multimedia 
tool Mediator 5, plus industrial design software Alias Studio PLE 


THE COMPLETE RESOURCE FOR DIGITAL CREATIVES - FIND US ONLINE AT WWW.COMPUTERARTS.CO.UK 
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050 Part 1: Planning 


Potential clients need to find what they’re looking for within 
seconds of launching your CD. So planning the layout of your 
portfolio is crucial to its success 


052 Preparing your CD layout 

053 Working with timelines 

054 Creating a splash screen in Photoshop 
055 Using shadows and changing colours 


056 Part 2: Animating elements 


You don’t have to worry about Web-connection restrictions with 
a CD portfolio, so you can really go to town with animation and 
rich media content 


058 Setting up an interface 

058 Importing source images 

059 Text transitions 

060 Combining animated text and graphics 


062 Part 3: Adding video and sound 


The next step is to make your CD content interactive. The 

| ar , addition of video and sound elements will turn your digital gallery 
into a dynamic display 

064 Building push buttons and animating bars 

066 Setting up a video interface 

067 Importing your movie 

068 Adding sound 


070 Part 4: Fine-tuning your CD 


It’s time to add the final elements to your CD portfolio. Make sure 
you include an interactive contacts page before testing everything 
and burning all your files to a blank disc 


072 Thumbnail-to-full-photo transitions 
073 Making contact easy 

074 Creating a stub projector 

075 Buming your files to disc 
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50 | Tutorial Creating an interactive CD portfolio 


Director MX = all the tools -you'll naad to showcase your creative work on an interactive CD... 


Osucceed asa freelance designs artist or video 
producer you'ttneed-to demonstrate to - 
-prospective Clients that you’ve-got what it takes 
to give them the quality and style of work-that 
they require. But how do you convince a client you're worth 
their hard-earned cash? One way is by dropping an 
interactive CD through their letter box. Then they can see 
the quality of your artwork, animations and movies in the 
comfort of their own office. If your would-be employer sees 
that you've worked for other clients, this'll reassure them 
that you've digested briefs, fought the slings and arrows of 
outrageous deadlines and come up with the goods. 

But having excellent creative work isn't enough if it’s not 
presented properly. Your interactive CD must display your 


. images ant movies ina clearand.creative way. The client 


must be able to find what he wants to took at quickly. without 
trudging blindly round the interface. Ifthe CDisn’t . 
immediately user-friendly, the client will be reaching for 
the dreaded eject button with one hand while picking upa 
rival's disc with the other. Here, we'll teach you how to 
create an interactive CD for So&So Design, an imaginary 
design company. We'll show you how to make the 
interactive portfolio take the client straight to your Website. 

We'll be using Director MX, the latest incarnation of the 
popular interactive CD authoring tool. This new version 
comes well equipped to integrate a variety of source 
images, sounds, movies and Flash MX files to help us 
create a killer interactive portfolio. 


Expertise provided by Geb Cains. Asa 
freelance writer and illustrator, George is no 
stranger to selling his skills using 
technology. You can contact George at 

[e] george@georgecairns.com or visit his 
Website at [w] www.georgecairns.com. 


Files on disc 
The files needed to support the following 

D project tutorials can be found in the 
Tutorial\CD project folder on the cover CD. 


Initial planning 
and CD layout 


As with an online portfolio, your interactive 
CD will need to be planned carefully before 
you boot up Director MX... 


As with the online portfolio sketch, 
your navigation should be done on paper 
first before you begin your projector file 


A lanning the way that your 
f viewer navigates your CD 
must be the first item on 


your ‘to do list. It’s in Director. You may want to consider 
= extremely important that your CD is easy creating a splash screen to introduce 
Toren ae to navigate and that your content is not | your viewer to your work. We'll also show 


hidden away in some sub-folder. you how to create a stub projector. > 


Illustration: Magictorch [w] www.magictorch.com f 
[ 
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Part 1: Preparing for CD projects 
Projects, like battles, are won or lost depending on how effective the pre-production (or 
strategy) is. Before we get interactive, let's get organised... 


Back Forward 


So&So.Images Flash Components 
= 
ao 
TextforCD doc 


a Before you approach Director, work out what 
you want your interactive CD to show the 
viewer. Think about who your audience is, choose 
your best and most striking work, and write all the 
supporting blurb you'll need to sell your skills. 


See our work CF wrdaa; 


4 | It's imperative that the client finds the creative 
content as soon as he launches the CD. You 
can't afford to send them on a frustrating hunt for 
your work. As attention spans are shorter than ever, 
the eject button is an ever present danger. Make the 
menu page clearly link to the different sections. 


Director uses theatrical terms for the main 
components of its interface. Here, you'll be 
making a Movie using members of a Cast who 
you'll place on a Stage and direct using a Score. On 
opening Director you'll see that you have the 
freedom to show/hide and re-arrange the interface 
layout as you see fit. 


6 This is the most important stage of pre- 
production. Sketching out a hierarchy should 
help you organise the layout of your CD's contents 
when you start putting your components into 
Director. This gives you a smoother workflow and 
makes life easier for your potential clients as they 
navigate the CD with ease. 


5 | To help design the look of our interactive CD's 
general interface it's helpful to arrange 
components on separate layers in Photoshop. This 
also helps you to set your components to the correct 
size and resolution before you import them into 
Director. We've made sure the portfolio echoes the 
look and feel of the So&So Website. The font used 
on both is Helvetica Neue. 


Take a look at the Cast window. If it's not 

open, go to Window>Cast (Command-3). 
Cast Members can be anything — images, movies, 
even frames from a Swift3D animation. They wait in 
the wings of the Cast window, ready to play out 
their part in your interactive movie. 


So0&So Design specialises in print, package 

design, photography and video, so it’s logical 
to get a taste of what the company is about straight 
away. Later, we'll be adding a Flash movie that 
plays through examples of So&So's work on the 
main interface. 


RR ODE ATTY HRT 


G Draw up your battle plans by designing your 
project's layout and hierarchy. Before engaging 
the enemy (impending deadlines and square eyes) 
familiarise yourself with the combat arena — the 
Director interface. Double-click on the Director icon 
to launch a new project. 


9 | The Stage is where the Cast Members strut 
their stuff as sprites (Window>Stage). This is 
what the viewer of your interactive CD will see, 
unaware of the presence of behind-the-scenes Cast 
Members like lingo scripts. You can see a variety of 
information about the sprites, like what behaviours 
have been assigned to them. 


10 | Non-linear editors will recognise the Score as a 
timeline. It plays from left to right, frame by 
frame. Sprites appear on the Stage as the playback 
head moves from cell to cell. Photoshop users will 
notice that the Score also has layers (or channels) — 
a powerful way of organising and presenting your 
components. Sprites in higher numbered channels 
are nearer the front. 


The Score contains tools and menus you can 

use to modify the sprites. At the top of the 
Score you'll find the Effects Channels. Here you can 
place Cast Members like sound. Later in the tutorial 
you'll be using the Transition Effects Channels to 
create your main interface elements that materialise 
one by one. 


o> s 
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16 | To get your CD projector to launch quickly 
you'll be creating a fast-start stub projector 
later in this tutorial. This Shockwave compressed 
mini-movie links to other movies in the projector. It 
will also contain all the Xtras files needed to play the 
larger Director movies that it links to. 


photography 
Space photos 


11 | Once a Cast Member is placed on the Stage or 
in the Score, it becomes a sprite. A sprite is not 
a copy of a Cast Member — it’s an instance. This 
means it's a memory-saving reference to the original 
Cast Member, not a memory-wasting copy. 


space photos 


photography 


14 | The Score will play forward frame by frame 
from beginning to end. You can make your CD 
more interactive by using a whole library of lingo 
behaviours. Any behaviours you use will join the 
other members of the cast in the Cast window. 

You can then edit these behaviours using the 
Property Inspector. 


As well as giving the user rapid access to your 

CD content, a stub movie enables Director to 
get its act together to prepare the rest of the CD 
content. A stub movie should not contain much 
media. Splitting your project up into separate 
movies helps streamline your workflow as you can 
modify the movies individually. 


photography 
space photos 


If you change a Cast Member, all the sprites 


referring to it in the Score will change too. 
However, changing the properties — say the size — 
of a sprite does not affect the Cast Member. 
We'll be using the Property Inspector 
(Windows>Inspectors>Property) to change the 
settings for various sprites and movies as we go 
through this tutorial. 
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15 | Once you've directed your Cast Members on 
the Stage using keyframes, effects and lingo 
behaviours, you can publish the movie as a projector 
that will launch on your would-be client's desktop. 


eS PRT 5, RI 
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profiieMovie.dir VideoMovie.cir 


18 | Our So&So project will have a stub movie to 
launch the splash screen and the main menu 
movie. This in turn will link to four separate movies 
covering print, package design, photography and 
video. This makes changing content easier as you 
can modify the other movies without having to 
remake the projector each time. > 
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Part 2: Creating a splash screen 


We'll start by creating a simple loading graphic for our interactive portfolio, to be used 
as a splash screen or a background image for the stub projector later in the project... 


Professional touch 


Your potential employers or 
clients are used to seeing splash 


screens when they load 
applications like Photoshop. 
It's an important element to 
include on your CD portfolio if 
you're going to make a positive 
first impression. 


a When you visit some Websites or open an 


Since So&So Design does illustration, we 
application like Director, you're greeted with a A splash screen is a good idea as it gives the 


created a balloon graphic for our splash screen. 


simple splash screen. In Director MX you can add a user an instant result when they launch the The balloon was created in Swift3D, a package that 
splash screen to your CD projector - it appears CD. They are used to seeing splash screens when produces vector-based graphics. We'll be looking at 
immediately and remains loaded until the first movie they launch applications like Photoshop, so it's a creating vector shapes within Director Mx later in 
of the projector begins to play. professional touch to include one. this tutorial. 


Name; [Splash Screen 
— tnage Size; 900K A$ $$_$_ 


Preset Sizes: | 640x480 B 


Width: (pixels 
= SOR SCMESIGN 
Resolution: (pixels/inch FREELANCE DESIGN ER 
Mode: (RGB Color Fa) — — 
= Contans  b ee } f 
Owhite 
O Background Color i z 
@Transparent : 
—— G Add the Swift3D rendered balloon to one layer 
(balloon.psd on the cover CD). Label it G The splash screen is only going to be on the 
4 | To create the splash screen, open Photoshop. Balloon. Open the So&So logo (So&So.jpg on the screen for a short time, so lose the text at the 
Go to File>New. Create a file at the same cover CD) and add that to a separate layer. Initially bottom because there won't be time to read it, Keep 
resolution as the projector. Make it 640 pixels wide it'll be too large for the file size but you cansort that — the more abstract So&So logo. Select the text using 
by 480 pixels high at a resolution of 72 dpi. out in a tick. the Marquee tool. Hit backspace to delete it. 


- os be —_——— g Make the balloon stand out a little from the 
With the logo layer selected, choose 8 | Scale the balloon down a little using the 


logo by giving it a shadow. Select the balloon 

Edit>Transform>Scale. Shrink the logo down Transform Scale tool. You can fine-tune its layer. Control-click on the layer thumbnail and 
to size then use the Move tool to position it to fiton size and position once you've got more balloons on choose Select Layer Transparency from the pop-up 
the 640x480 screen. the screen. menu that appears. The balloon becomes selected. 


image Layer Select Filer View Window Help 
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Click on the Create New Layer icon at the 

bottom of the Layers palette. Select the new 
layer and label it Shadow. Go to Edit>Fill>Black. 
Using the Move tool, offset the shadow slightly and 
place its layer behind the balloon’s. 


Use the Move tool to position the linked layers 
13 
in the Layers palette. 
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16 | In Windows place a bitmap (.bmp) version of 
the image next to the projector in the same 
local directory. Macintosh users must place a pict 
(.PCT) in the same folder as the projector. However, 
if the projector is set to Full Screen, there might be a 
problem displaying the splash screen properly. In 
that eventuality you can still use the graphic for 
your stub projector. 


With the shadow layer selected, go to 


Filters>Blur>Gaussian Blur. This will soften the 
edges of the shadow in a more realistic way. Reduce 


the Opacity of the layer to 80 per cent. 


To create a different coloured balloon, drag the 


orange balloon onto the Create New Layer 
icon. Duplicate the shadow layer in the same way 
and link the two copies together. Move them into 
a new location. 


The name that you use for the splash screen 
must match the name used by the projector. 

For example, if your Windows projector is named 

Projector.exe then your bitmap file must be called 

Projector.bmp. And if your Mac projector is 

named Projector, then your Pict file should be called 

Projector.PCT. 


Select the shadow layer and click on the link 

layer icon (next to the eye icon) to link the 
balloon and shadow layers together. Use 
Edit>Transform>Scale to reduce the size of the 
balloon and shadow in one operation. 


Change the new balloon’s colour. Go to 
Image>Adjustments>Hue/Saturation> 
Colourise. Reduce the Saturation to remove all the 
colour so the balloon echoes the black sections of 
the So&So logo. Go to Image>Adjustments>Auto 

Levels to make the blacks blacker. 


18 | When the user clicks on the projector, they'll 
immediately see the splash screen, which will 
stay on screen until the Cast Members are loaded 
and the main movie begins to play. FEES 
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Animating text 
and graphics 
for your CD 


Jazz up your CD interface with some 
interactive elements and animation... 


nimated elements really Follow our in-depth tutorials and learn 
make a CD interface look how to make your CD special. > 
professional. 

With a CD portfolio your 6 


user has no need to go online to view your 
work, so the sky really is the limit — you 
can fill your CD with rich media content. 


Illustration: Magictorch [w] www.magictorch.com 
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Part 1: Importing components 


It's time to set up your Director project and start importing the source images. 
You can also create some of the portfolio’s components in Director itself... 


To link or 
not to link... 


Importing a file into Director 
means you'll end up with a larger 
projector, because the Director 
movie has to contain the image 
files. You could link the movie to 
external files to make it more 
lightweight. However, linking to 
files outside Director can be 
risky because the projector might 
not be able to find the files if any 
of them have been moved into 
other folders. 


Reference image 


When putting the interface 
together in Director, you'll find it 
helpful to import a flattened 
image of the complete layout 
for each section from Photoshop 
to use as reference. You'll find 
this in the Images folder on our 
cover CD. 


Transitions 


Once you've created a transition, 
it appears as a Cast Member in 
the Cast window. If you create 
another transition by double- 
clicking in the Transition 
Channel, even an identical one, 
it will also appear as a separate 
Cast Member. Save time and 
space by dragging the transition 
you've already created from 

the Cast window to the Score 

to re-use it. 


& Double-click on the Director icon. Then go to 
File>Create New Movie. To allow a 
streamlined workflow, arrange the interface to suit 
your monitor. The desktop might initially look 
cluttered and disordered with distracting desktop 
icons showing through. 
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4 | We want our interactive CD to play on any 
size monitor. As the movie will be smaller than 
some monitors on which it's viewed, go to the 
Location pop-up and choose Centred. Save your 
Director movie into a new folder or directory. Call 

it MainMovie.dir. 


When the movie first appears it'll be cool to 

see the various elements in the interface 
materialise one by one. This will draw the user's 
attention to each element of your interface and 
have them itching to get clicking. In the Score 
window, click on the Hide/Show Effect Channels 
icon to reveal them. 
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To isolate the Director interface from the 

unwanted background elements, select 
View>Full Screen from the top menu bar. (Click in 
the top part of the screen to make the bar appear.) 
Press Command-3 to bring up the Cast window, 
Command-é4 to activate the Score, and Command-7 
to show the Tool palette. Now things look tidier. 


{rao Files into “interna” 


Go to File>Import and locate the Images 

directory on our cover CD. Select 
Background.tif. Click Add. Because you're creating a 
CD, you can afford to choose Standard Import. 
Director brings the image file straight into the movie 
rather than linking to it (see ‘To link or not to link..."). 
Click Import. Set the Colour Depth to 32 bits. 


Double-click in the second frame of the 

Transition channel. This will cause the 
transition to occur once the playback head reaches 
Frame 2, which is the starting point of the 
background sprite-span. From the Dissolve 
Categories select a Pixel Dissolve Transition and set 
it to .75 of a second. 
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Most interactive CD interfaces measure 
640x480 pixels, so set your stage size to those 
dimensions. Turn on the Property Inspector, and click 
on the Movie tab. Click on the pop-up icon to the 
right of Stage Size and choose the preset 640x480. 


G The background graphic now lives in the Cast 
window. Click on the Cast View Style icon to 
see the thumbnail of the newly imported Cas 
Member. Drag the Cast Member to the second cell 
of Channel 1 in the Score window. Leave the first 
frame of the movie blank for reasons we'll explain in 
the next few steps. 


Press Command-2 to activate the Control 

Panel. Hit the Rewind icon then the Play icon. 
As the movie plays, the background image will 
dissolve in from white. 


Part 2: Integrating text 


Add text to the cast and bring it into your movie 


Good behaviour 


If you need to alter the behaviour 
of a sprite once you've assigned 
specific values to it, open the 
Property Inspector and choose 
the Behaviours tab. Here you can 
see and edit behaviours like the 
rotation speed of a 3D text sprite. 


Let's create text elements then dissolve them 

in using the same transition technique. Press 
Command-5 to open the Paint window. Click on the 
Text tab. Choose Helvetica Neue to match the font 
in the background image. Type “...where digital 
meets design". Type 1 in the kerning box to widen 
the gap between each letter. 
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4 | Director MX enables you to create rotating 
3D text within the package. We'll use this 
feature to make a spinning So&So logo to brand 
the various sections of the CD. Create a So&So 
text Cast Member using the Text Editor. Make the 
font size 18. 


The So&So text becomes orange and loses its nasty 
default gray colour. 


The text has become a new Cast Member. 

Drag it from the Cast window onto Channel 2. 
Slide the text sprite’s span so that it starts at Frame 
5. Click on the sprite in the Stage window and 
position it as shown. Drag the transition from the 
Cast window and place it above the starting point of 
the text sprite. 


Next, go to Window>Property Inspector. 

Select the So&So text by clicking on it in the 
Score or Cast. In the Property Inspector select the 
Text tab and choose Display>3D Mode from the 
pop-up menu. 


Position the logo as shown. You'll notice that 

the white borders of the sprite block out any 
sprites on the channels below. Select the Sprite tab 
in the Property Inspector and change the Ink of the 
So&So 3D text to Background Transparent. 


Play the movie and you'll see that the text 

dissolves in after the arrival of the main 
background image. In the Text Editor click on the 
New Cast Member icon and create the rest of your 
text sprites. Have them rapidly dissolve in one by 
one using the transition effect. Fine-tune the 
position of the sprites on Stage by moving them 
with the arrow keys. 


In the Property Inspector click on the 3D 
Extruder tab. You can use this tab to define the 
look of the So&So 3D text. Set the Tunnel Depth to 
a low value or the text will look too blocky and be 
illegible. Set Bevel to Round to make the edges nice 
and smooth. Set the Light to Top Right to highlight 
your text's new 3D appearance. 
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9 | Now to animate the text. Go to 
Window>Library Palette. Click on the Library 
List icon and select 3D>Actions. Select the Automatic 
Model Rotation icon and drag it to the So&So text 
sprite on the stage to allocate that behaviour. Make 
it Rotate around the Y-axis at a speed of 2. *> 


¢ 
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Integrating text continued... 
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As the text rotates around the Y-axis, parts 

of it will disappear as they move out of the 
edge of the text field. You'll need to zoom the 
virtual camera out so that all the text is visible 
throughout its rotation. Change the Camera 
Position Z value to 87. 


Modify Control Xtras Window Help 6 
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As Director MX enables you to import Flash 
MX movies into the cast, you can use .swf 

movies to jazz up your interface. Select 

Insert>Media Element>Flash Movie. 


16 | Hit Play in the Control Panel (Command-2) 
and the text will appear. The spinning logo will 
rotate endlessly and the Flash movie will dissolve in 
thanks to a transition effect. 


11 | Extend all the sprite-spans so they finish at the 
same time. When you press play, the playback 
head jumps from the end of the movie back to the 
start causing the components to appear then vanish 
in an endless loop. The 3D text doesn't get the 
chance to spin for long either. You need to take 
control over the behaviour of your movie as a whole. 


Turn off Linked so that the Flash file will 

preload into the Director movie. There's no 
sound in the movie so uncheck the Sound option. 
Set the movie to loop so that it'll keep playing 
until the user chooses to click a button to go to 
another section. 


where digital meets design 


profile _porttolio contact 


As we set the Flash movie to loop it'll play 

continuously, showing examples from So&So 
Design's wide-ranging portfolio. As Flash files are 
vector-based they can be scaled on the stage with 
no quality loss. You can also add .swf animations 
from third party applications like Swift3D to liven 
up your interface. 


You can tell the playback head to stop once all 


12 the elements of the movie's main interface 


have materialised. In the Library palette click on 

the Library List icon and choose the Navigation 
section. Drag the Hold On Current Frame icon onto 
the last cell in the Script Effect Channel. Now the 
elements appear and stay on screen while the text 
rotates non-stop. 


Click on Browse to import the intro.swf file 

from the CD. Drag the Flash movie from the 
Cast window onto the Stage. As the movie already 
fades up from white, you don't need to use a 
transition to make it materialise on stage. 


where digital masta design 
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18 | At this stage in the project all we have is flashy 
eye-candy as the interface struts its stuff. In the 
next part of this tutorial we'll make our portfolio 
interactive. Save the movie you've made as 
IntroMovie.dir. FEES 
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Illustration: Magictorch [w] www.magictorch.com 


Adding video 
and sound to 
your CD 


Once you've animated text and graphics, the 
next step is sound and video... 


f you want to add more video to your portfolio and sound clips 
interactive elements to your too. These elements will enhance the 
portfolio, why not animate user's viewing experience. > 
the work in the gallery 
section of your CD. Turn your passive Files on disc ; 
movie into a portfolio that your user can The files needed to support thi 
interact with. By following our tutorials tutorial are in the Tutorial\CD 
over the page you'll learn how to add project folder on the cover CD. 
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Part 1: Animating elements in your portfolio 


Now to turn your passive movie into a portfolio that the user can interact with... 


Self-help 


If you need to know the names of 
any of the tools in Director, hold 
the mouse over the tool's icon. 
You'll then get a pop-up telling 
you what it’s called. 
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We want to launch new movies when the user 

clicks on each icon — for example, the Portfolio 
text icon. To enhance the interactive experience, 
we'll show you how to use Director to create a 
button that reacts when clicked on and takes the 
viewer to the relevant movie. In a new channel select 
the first cell that overlaps the Portfolio text sprite. 


Because the Cast window contains text and 

imported graphics that you might want to re- 
use in other movies, keep the cast you've already 
created. In the Cast window press Command-A to 
select all the members. Choose Edit>Copy Cast 
Members from the main menu. 
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Choose Window>Vector Shape to open the 

Vector Shape Editor. Select an orange colour 
from the Fill Colour palette. Change the Stroke 
Width to 0 so the bars don’t have an outline. Select 
the filled rectangle icon and click-draw in the 
editor's window to create an orange bar. 


Press Command-7 to open the Tools palette. 

Select the Push Button icon on the bottom 
right of the palette. On the Stage click-draw a 
button over the Portfolio text sprite. To make it 
transparent open the Property Inspector and turn 
the Sprite’s Ink to Background Transparent. 


Ga Choose File>New Movie. Click in the new Cast 
window and choose Edit>Paste Cast Members, 
(You can easily get Director to remove any unused 
Cast Members at the end of our project to save file 
space.) Save the new movie as PortfolioMovie.dir 
because this is the file name that the Portfolio Push 
Button will look for. 
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3 To link to the other movies in the project, 

3 | open the Library palette and choose the 
Navigation behaviours. Drag the Play Movie X icon 
onto the Push Button Cast Member on the Stage. 
Label the movie you want the icon to link to as 
PortfolioMovie.dir. 
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G When the new movie appears, we want the 
horizontal orange bars to animate, moving 
wider apart to make more space for the Portfolio 
images. You can use the bars in the original 
background image for reference, so drag the 
background image onto Channel 1. 


8 | Drag the orange vector bar onto Channel 2 in 
the Score. As it's a vector shape you can re- 
size it to overlap the orange bar in the reference 
image. Place two vector bars on top of the original 
bitmap bars. To see if they're aligned, turn them on 
and off by clicking on the far left icon of their 
respective channels. 


9 | Import the new background for the portfolio 
section (backgroundO2.jpg on the cover CD). 
Since we're going to animate the orange bars as 
vector shapes, the new bitmap background doesn't 
contain any of its own. Remove the old reference 
background from Channel 1 and replace it with the 
new background image. 


Easy alignment 


To align copied sprites, place the 
new one ona higher numbered 
channel so that it overlaps the 
original sprite you want to align it 
with. Then you can move the new 
sprite to overlap the old. Once 
you're happy that they're aligned, 
you can place the new sprite 
wherever it needs to go and it'll 
stay aligned with the original. 


10 | Extend the sprite-spans in the Score to Frame 
30. Select the top orange sprite. Click on the 
small green dot at its centre and drag it upwards. 

A line appears indicating the path of the sprite over 
time. Position it near the top of the screen. 


To extend the vector sprites, copy them. Then 

paste them in the next empty cell in Channels 
2 and 3. Right-click on each sprite and choose 
Remove Keyframe. Align them with the last frame 
of the moving sprite. Now the orange bars will 
move and then stay in position. 


16 | To make sure that the various text sprites are 
aligned accurately, open the Property Inspector 
(Window>Property Inspector). From the Guides tab 
you can drag a vertical line, which you can use for 
aligning your text. 


tt | Notice in the Score that you now have two 
keyframe circle icons at the start and end of 
the sprite-span. As the sprite moves, Director is 
filling in all the frames between the start and end 
keyframe. This is called tweening. Drag the 
playback head back and forth to see the vector 
shape move. 


14 | Create text in the usual way and make it 
dissolve in once the orange bars have moved 
into position. If you need to change the colour of 
the text from orange back to black, open the Text 
window and the Tools palette and click on the 
Foreground Colour icon to change the colour. 


Import the pack shot (Soandsopackage jpg) 

from the cover CD and place it on the Stage. 
You'll need to place it under the other elements. 
Recreate the rotating 3D So&So by dragging the 
existing Automatic Model Rotation behaviour from 
the Cast onto the text sprite. Add a transition so the 
spinning logo dissolves in once the other elements 
have appeared on screen. 


Keyframe the lower vector bar to move 

position to Frame 30. Drag the dissolve 
transition from the Cast window into the first cell of 
the Effects Channel. When the Portfolio button is 
clicked to launch the movie, all the interface 
elements will dissolve away except the background 
logo and the orange bars. They will then move into 
their new positions. 


G Add some introductory text inviting the user to 
check out the various areas that So&So 
specialises in. Don't forget to make the sprite's 
background transparent. Use the Text Editor 
window to align the text to the right creating a 
straight line between both halves of the interface. 
Increase the line spacing between the Print, Package 
design, Photography and Video text sprites. 


18 | Add push buttons ready to be linked to other 
movies. Make the rotating animation logo link 
to the MainMovie.dir file. In the last frame of the 
Script Effects Channel, place a Wait on Frame 
behaviour. Tidy up the sprite-spans in the Score so 
they finish at the same time. > 
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Part 2: Adding video 


Enhance your portfolio by including video elements... 


Quicker QuickTime 


As our QuickTime movie is quite 
large (4.1MB) you could choose 
to link to it as an external file 
instead of going forthe standard 
import option. If you do that, you 
must make sure that the 
QuickTime file remains in the 
same location relative to your 
Director movie. We chose to 
embed the QuickTime movie in 
our Director file using the 
Standard import option. 


So&So Design also produces video sequences 

as part of its service to clients, so it’s essential 
to include examples of their video work on the CD. 
Fortunately, Director easily deals with a wide variety 
of different video file formats including RealVideo, 
AVI and QuickTime movies. 


4 | The interface elements you need to keep for 
the video section are the two static orange 
vector sprites. Delete the two keyframed vector 
shapes. Keep the carefully positioned text sprites as 
you can edit them. Keep the spinning logo and the 
background02.jpg bitmap image. Delete everything 
else including the Push Button fields. 


When the user clicks the Video button to 
come from the main PortfolioMovie to the 
Video section, we want the text in the 
PortfolioMovie to fade out before the text in the 
video section fades in. To achieve this effect, leave a 
few cells of white before the new text dissolves in. 
(Overlapping text during a mix never looks good 
and is hard to read.) 


fo8So can help 


Tour message 
Go Prenovs tenes to your clients. 


In the PortfolioMovie file, open the Library 
palette (Window>Library Palette) and from 

the Navigation list drag the Play Movie X icon onto 

the Video push button. Link it to VideoMovie.dir. 
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Now it's a simple matter of editing the existing 
text fields to create new blurb for our So&So 
CD's Video section. 


8 | Now you've sorted out the interface for the 
video section of the portfolio, it's time to add 
the video component. Go to File>Import. Where it 
says ‘Show’, select QuickTime. Choose the movie 
swimmer.mov from the cover CD. Click Add then 
Import. We used Standard Import to embed the 
file into Director. 
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3 As the VideoMovie is a sub-category of the 

Portfolio section, much of its interface will 
remain the same. It therefore makes sense to 
customise the existing PortfolioMovie to create the 
VideoMovie. Save the PortfolioMovie to make sure 
you have it. Then go to File Save As and rename it 
VideoMovie.dir. 
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The number in the sprite-spans refers to the 

position of the Cast Member used to create 
the on-stage sprites. Once your Score starts to get 
busy you might find it easier to make sense of what 
goes where by labelling the spans. Select each span, 
go to the Property Inspector and type a new name 
in the Member tab. 
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g Check the movie has imported correctly by 
double-clicking on it in the Cast window. This 
opens Director's QuickTime Editor window allowing 
you to play the movie. 


Press the little blue ‘i’ icon in the QuickTime 

Editor window to open the Property Inspector. 
Select the QuickTime tab to edit the playback 
settings. Check the DTS (Direct to Stage) box — this 
passes control of the movie's playback from Director 
to QuickTime. The downside of the DTS setting is 
that you can't overlay any other sprites on top of 
the movie. 
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Our QuickTime movie is quite large, which 

increases the size of our Director movie 
considerably. Apart from linking to it externally (see 
‘Quicker QuickTime’) another option is to convert it 
into a Flash file. 


of the first frame and place it in a cell just 
before the .swf file. Create a text sprite saying 
“Click to Play”. Go to the Navigation section of the 
Library palette. Drag a Wait for Mouse Click 
behaviour onto the script window above the still 
frame. Now the movie will pause until the user clicks 
on the screen. 


Turn off Streaming because you're not creating 


content for the Web (though with Director 


MX that's easily done). Turn off the audio option as 


there isn't any in the QuickTime file. 


Check out Chris Schmidt's tutorial on 

converting the So&So Swimmer QuickTime 
movie into a Flash file for use on the So&So online 
portfolio (see page 42). You can import this 
lightweight Shockwave file into your interactive 
CD portfolio as an alternative to the larger 
QuickTime file. 


swimmer 
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Tidy up and organise the Score for the video 
section of the portfolio. The text fades in first, 
followed by the appearance of the QuickTime 
movie and the spinning logo. If you dissolve the 
spinning logo in and there are still other transitions 
to take place, they will interrupt its spin. Add push 
buttons to the text links and link them to other 
movies (PrintMovie.dir, PackagingMovie.dir, etc.). 
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12 | To allow the user to take control of the 
QuickTime movie's playback, check the 
Control Box in the Property Inspector. When the 
movie first appears, it's paused until the play icon 
is pressed. 
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To get the Flash version of the Swimmer 
movie, go to File>Import and select 
Show>Shockwave Flash. Select the Swimmer Flash 


file (Swimmer.swf on the cover CD), click Add, then 


click Import. Set the Flash tab of the Property 
Inspector to Direct To Stage with the Quality on 
Auto-High. Turn off Audio. 
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You inherited many of the Cast Members from 

the previous PortfolioMovie.dir file. To save 
space and keep things tidy, delete unused Cast 
Members. Choose Edit>Find>Cast Member. Click 
the usage option. Click Select All then choose Edit 
Clear Cast Members. » 
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Part 3: Adding sound 


Import sounds for button clicks and transitions 


a Our interactive CD is coming together. Let's 


ice the cake by adding sound, like button For decent quality sound files choose a depth 
clicks, to events in our movies. Director MX accepts of 8bit or 16bits with a sampling rate of 3 The sound appears in the Cast window like any 
a whole variety of sound formats, like MP3, WAV, 22.050kHz. Go to File>Import and bring in the 3 | other imported component. Double-click on 
and so on. You can import sounds from CD or the 


sound in the same way that you imported the 
bitmap images and the QuickTime movie. You'll find 
our button sound (Beep.aif) on the CD. 


the sound to open the Property Inspector. Under the 
Sound tab there's a small play icon you can press to 
test that the sound file is working. 


Web. Organise your various components into 
separate directories for a streamlined workflow. 
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4 | To get the sound to play when the user clicks a 
button, open up the Library palette. Go to 


You can set the volume of the movie by opening 


The Sound Parameters window will open. G 
the Control Panel (Command-2). Click on the 


Here you can assign the specific sound-related 
action you want to occur when the button is microphone icon and choose a level. As you won't 

Media and select the Sound List. Select the Play pressed. If you have more than one sound file in know what sound set-up the user has, don't go over 

Sound icon and drag it onto the Video Push Button your Cast, you can specify which one you want the the top with the sound level. From the Sound List 

on the Stage. button to play. drag the Sound Beep icon to the button sprite. 
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: ; 8 | The Play Sound behaviour can also be used to 
An alternative approach to adding sound to add sound to specific frames as well as to 
button clicks is to tell Director to play the individual sprites. You could use it to play a specific To save disk space, compress the sound files. 
computer user's own system alert sound when a sound every time there's a transition, like an object 9 | Select File>Publish Settings. In the Publish 
button is pressed. This will reduce the size of the fading in. Using this technique, a transition sound Settings dialog box select Compression Enabled. 
= hea movie as it won't need to contain sounds could play when the user selects a new section of 
of its own. 


Reduce the bit-rate setting to 48k/bits per second 
the Portfolio to view. and select the Convert Stereo To Mono option. 
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Fine-tuning 
your CD 


When you're happy with your CD, you need 
to add those little extras that make it really 
special and then burn it onto a blank disc... 


our interactive CD should ensure that projectors for both Mac and 
work just like a Website in PC are available for the user. 
your CD drive. And this The final step is burning the files onto 
means that you shouldn't a blank disc ready to distribute to your 

forget those added extras that'll make potential clients. > 

your portfolio a really useful tool for 

advertising your expertise. 

This involves adding elements like a 
contacts page and back buttons to make 
it easy to navigate. You should also 


Illustration: Magictorch [w] www.magictorch.com 
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Part 1: From thumbnail to full photo 


Build on the skills you've learnt to add depth and variety to the portfolio’s interactive experience... 


Moving markers 


It's easy to create extra markers 
by accident when youre working 
in the Marker Channel. Get rid of 
unwanted markers by click- 
dragging them upwards out of the 
Score window. 
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i Save the VideoMovie.dir. Then go to File>Save 
As and call it PhotographyMovie.dir. Delete 
the Swimmer movie. Now double-click on the text 
sprites on the Stage to edit them to create content 
for the portfolio's Photography section. All the links 
and transitions have already been set up, so it won't 
take long to modify the contents. 
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4 | From the top of the Score you'll find the 
Markers menu. You can use this to create and 
label two new sections in your movie for the larger 
versions of the photos. Click in the bar at the top of 
the score to create a new marker. Drag it to the right 
until you find some empty cells. 
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To make the large photo slide in when the 

thumbnail is clicked on, add a transition to the 
beginning of the large photo's section. From the 
Push Category section choose Push Left. 
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Go to File>Import and select 

photo1Thumb.jpg from the Images folder on 
the cover CD. Click Add. Then select and add 
photo2Thumb.jpg, Photo1 .jpg and Photo2.jpg. 
Then click Import to bring them into the Cast in one 
time-saving operation. 
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Label the marker ‘Photo1'. Drag Photo1 from 

the Cast to a Channel in the Score so it starts 
under the marker. Drag the Hold On Current Frame 
Cast Member onto the Script Effect Channel above 
this new section's last cell. 


Control Pane! 


io Add the orange vector bars to the top and 
bottom of the screen so that the only elements 
that change are the ones between them in both 
sections. Now when you click on a thumbnail the 
main interface slides left to be replaced with the 
large version of the photo. 
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3 | Place both Cast Members on the area of the 
Stage previously occupied by the Swimmer 
QuickTime movie. Shift-select them both to align 
them. Go to Window>Align. An option box appears 
enabling you to align the sprites in a variety of ways 
including horizontally or vertically. Add a Click 
Image To Enlarge text sprite. 


G Select the Photo1 thumbnail. Open the 
Controls List from the Library palette. Drag the 
Jump To Marker Button onto the small Photo1 
thumbnail image. In the Parameters dialog box set it 
to jump to the Photo1 marker. Now when you click 
on the thumbnail it'll go to the large image. 
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Create a back button for the Photo1 section 

using the Go Frame X behaviour. Send it to the 
cell where the transition to the thumbnails first 
occurs. Using the same techniques, create and link 
to another section for the second image. 


Part 2: Contact details 


Before publishing your CD, fine-tune the components and set up ways for the 
user to contact you and check your Website... 


Making contact 


An interactive content page is 
essential. This is a great way for 
impressed users to get in touch 
with you for that all-important 
commission. If they can do it with 
one click of a mouse, it's one step 
closer to pay day! Even if they 
don't commission you straight 
away, feedback from 
professionals is worth its weight 
in gold and will help you tweak 
your work to stand more of a 
chance in the future. 
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Create a Profile page to inform the would-be 

client of your past experience. If you need lots 
of text, modify the text sprite so that it scrolls. Go to 
the Property Inspector and, in the Framing option, 
select Scrolling. 
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Let the user realise that the Web link is 

interactive by making it change colour when 
the cursor rolls over it. Create a second identical 
text sprite. Colour it orange. Open the Interactive 
list from the Library palette. Drag the Rollover 
Member Change icon onto the black text sprite. 
Tell it to display the orange version of the text sprite 
on rollover. 
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Hit Play and test the links. The last thing you 
want is for the user to find dead links or links 
that waste their time. It was during the testing stage 
that we decided to remove the Video, Photography 
and Print buttons from their respective Director 
movies, because the user wouldn't need those 
buttons when they were looking at those movies. 
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As the project develops you'll be able to re-use 

many of the elements instead of having to 
create new ones. Quickly change the links from 
existing buttons by selecting the button sprites and 
editing their behaviour in the Property Inspector's 
Behaviour tab. 
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For email contact you can tell Director to open 

the user's browser and set up a correctly 
addressed mail with a filled-in subject heading like 
CD Feedback. This will let you know that your 
mailed-out CDs are bearing fruit. (This only works if 
the user has configured his browser for email use. 
The user can always copy the address into his 
chosen application.) 


ing So8So Ltd's 


foe of wget 


8 | During the testing of the portfolio's 
interactivity, you may spot ways to improve 
the user's experience that weren't obvious in the 
original pre-production design phase. We decided 
to add a Contact button to every section to make it 
easier for the user to find the contact page. 


Create the all-important Contact movie. 

For easy access to the So&So Website, open 
the Library palette and choose the Navigation 
list. Drag the handy Go to URL icon onto the 
relevant text sprite. Type in the link to 
www.soandsodesign.co.uk. When the user clicks 
on the text, it'll open the browser and direct it to 
the site for the latest So&So news. 
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G To launch an email from Director, use the 

Go to URL behaviour. This will open the 
default browser and have it ready to send an email. 
Select the email text sprite. Apply the Go to URL 
behaviour to it. In the dialog box, type: 
mailto:us@soandsodesign.co.uk?subject=CD 
Feedback 
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a The last thing to add to your Director movies is 
a Quit button. You don't want to irritate 
would-be clients by not letting them leave your 
portfolio, no matter how good it is! Link the Quit 
text sprite to a marker called Quit. In the Quit 
frame's Script Channel type: 

on exitFrame me 

quit 

end > 


Tutorial Creating an interactive CD portfolio 


| Tutorial Creating an interactive CD portfolio 


Part 3: Publishing your portfolio 


You've tested your portfolio’s links. Now it's time to publish it... 


Stub projector 


The stub projector launches 
your other Director movies so 
you don't need to include them 
in the projector. This means 

you can continue to edit your 
movies without having to remake 
the projector each time you 
change something. 
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| New FontName: Helvetica Neue * 


AaBbCcDc | Original Font: {Helvetica Neue [2] | 


jets 
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| Bitmaps: @None 
OSizes: 


O gold 


Otntire Set 

@ Partial Set 
Punctuation 
numbers 
Roman Characters 
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2 other: 


Images & sontent 
©2000 Bo8Eo Design 


To make sure that the viewer sees your 

portfolio with the correct fonts, embed them 
into each movie. Choose Insert>Media 
Element>Font and pick Helvetica Neue from the 
Original Font menu. Click on Partial Set to avoid 
including Japanese. 
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4 | To simplify the design, we decided not to use 
the balloon graphic logo. We're going to 
create an animated loading bar that contains the 
corporate colours of So&So Design. In the Vector 
Editor create a vector rectangle shape filled with a 
black-to-orange gradient. Create a second gradient 
rectangle filled with white. 


Open iy. 


from: ([isoaso Interactive 
S comacmovie ir 


& Manmovie ir 


B Packagingmovie dir 
motographyMovie ir 

fund: Document 
Size 36 KB 


& Portfotomovie.cie 
BF Prntstovie.dir 

F prohieMovie die 
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Movie Size: 36.0K 


VideoMovie.dir 


Playback Order 
j StubMovie.dir 
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Remove 


Projector Size: < 2.8 MB 
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3] 

Turn the stub movie into a projector. Go to 
File>Create Projector. Click on StubMovie.dir 

from your choice of movies and click Add. 


@ em 


Back Forward 


MainMovie.dir 


ContactMovie.dir 


@ 


where: { [3 So&So_Interactive BB 


tiff 
© 2Boys PG 
FR 126.0 


PackagingMovie.dir 


@ beep.mov 
® beep.mp3 


ContactMavie.dir 
MainMovie.dir 
PackagingMovie dir 
PhotagraphyMovie dtr 
PorttolioMovie, dit 

@ PrintMovie.dir 


rohieMovie.dit 
& prot rt re 


PhotographyMovie.<ir PortfolioMovie.dir 


profileMovie.dir 


To streamline your movie files, go through 
each one and delete any unused Cast 
Members. Go to Edit>Find>Cast Members and 
delete the ones you don't need. Then go to 
File>Save and Compact to keep the file size down. 
Place copies of the finished movies in one folder. 
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On the Stage, lay the white vector shape on 

top of the black-to-orange gradient shape. 
Keyframe the white rectangle to move from left to 
right to reveal the coloured shape beneath. 


From: 


& contactmovie.cir 
B® VanMovie oie 
& PaceagingMovie.sic 
Projector Options 


Playback: (2 Play Every Movie 
S Animate in Background 
Options: Sf Full Screen 
© Show Tale Rar 
Stage Size @ Use Movie Settings 
O match First Movie 
Bcenter 


Reset Monitor to Match 
Movie’s Color Depth 


Media: &§ Compress (Shockwave Format) 


Player: © Standard 
O Compressed 
@ shockwave 


Target: @ MacOs x 
O Classic MacOS 


Memory Vi lise System Temporary Memory 


8 | Click on Options. In the Projector Options 
dialog box tick the Full Screen Options box. 
Use Shockwave Format Compression. Set the Player 
to Shockwave. (If you used the Standard Player 
option, you would create a larger projector 
containing the Director player.) 


ib eg 
\e @ SubMovie.dir 


Now to create a small stub or slim projector 

that will quickly launch the main interface. 
Unlike the rest of the Director movies, this'll be a 
Shockwave movie, which will save space by not 
including the Director player. Create a new movie 
and call it StubMovie.dir. 


Frarameters tor "Pay Move X° 


Fay which move on exttramer [Varhioce ar} | 


“include path if necessary. 


eo rena oon 
yom 
for Sane 
ay raia 


a oy a 


6 | At the end of the sprite’s range of cells add a 
Play Movie behaviour in the Script Channel 
that says Play Movie MainMovie.dir. This small 
movie will launch the main interface movie 
(MainMovie.dir) once it's played through the 
loading bar animation. 


EB Pouyscreens 
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9 | Name the projector So&Solnteractive. Make 
sure you save it in the folder containing the rest 
of the project's Director movies. 


Director Player Error 


This application requires an Xtra (Font...) that either does 
not exist or failed to initialize properly, Please make sure 


the appropriate Xteas are in the Xtras folder(s) 


Now test the projector by double-clicking on 

it. Though the most common Xtras are built 
into the Shockwave player, it's a fair bet that it'll ask 
for more Xtras in order to play certain components 
in the Director movies it's linked to. 


Movie Xtras 


Ce 


INetUrl PPC Xtra 
NetFile PPC Xtra 
NetLingo PPC Xtra 
SWA Dec... PPC Xtra 
MacroMix.x32 
DirectSound.x32 
Sound Control 


(Add Defaults > 


_\ include in Projector 
| _) Download if Needed 


You'll see all the Xtras currently assigned to 
13 
your Shockwave movie. You could tell 
Shockwave to download the additional Xtras it 
requires from the Web when they're required. This 
will lighten the file size, but it might put off the user 
who wants to see your work immediately. 
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16 | Once you've added the required Xtra Assets, 
you can try lightening the load by removing 
the Animated GIF Asset since you didn't use GIFS 
in the project. Tick the Use In Projector box then 
click OK. Now remake the projector. You'll notice 
from a progress window that the new Xtras are 
being added. 


If you continue to play the projector, you'll 

see vital components can't be displayed. You 
need to remake the projector and make sure it 
contains the Xtras it needs to display your 
components correctly. 


Movie Xtras 


_| hdd Network > | OK 


Flash Ass...tions PPC 
Font Asset PPC 

Font Xtra PPC 

GIF Agent 

Havok 


“Download if Needed 


14 Click Add to select the additional Xtras 
required to play the other movies in your 
project. Choose the Font and Text Assets to display 
your text sprites. As there is a QuickTime movie in 

your project, also select the QuickTime Asset. 


A leader in its field, So8So can help 
you communicate your message 
clearly to your clients. 


See our work inffhe following areas: 


oy 
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Test your movie again to make sure it works. 

Once you've made the projector, you can still 
fine-tune your movies — they aren't part of the 
projector; they're linked to it. (Don't change their 
file names though, or the stub projector won't be 
able to find them!) 


Tonror Xtras window Help 86 


> 


Properties... 8D 
Casts... ORC 


Playback... 


XORT 
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Cast to Time 
pace to Time 


Tr 


12 Open the Director StubMovie again. To embed 
the relevant Xtras in the Shockwave stub 
projector go to Modify>Movie>Xtras. 


Movie Xtras 


‘Add Network a 


‘QuickTime Agent 
QuickTim. .t Options 
Script Agent 
Shockwave 3D Asset 
Sound Import Export 


Download if Needed 


15 | Since you used Director MX's 3D text options 
in your Director movies, you'll also need to 
include the Shockwave 3D Asset Xtra to play your 
spinning So&So logo. Remake the projector with 
these new Xtras embedded in it. 
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So&Sointeractive 


@ 
ContactMovie.dir MainMovie.dir 


PortfolioMovie.dir PrintMovie.die 


PhotographyMovie.dir 


= 
@ @ 


profileMovie.dir VideoMovie dir StubMovie.cir 


Burn the folder containing the projector and 

movies to CD. Test the projector running from 
the CD. You might find you need to speed up the 
transitions to take into account the fact that the 
projector is no longer being played directly from 
your hard drive. EES 
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Illustration: Magictorch [w] www.magictorch.com 


Buming your 
own CDs 


Whether you use CDs to store data, or as a 
transport and presentation medium for your 
multimedia projects, writers are cheaper than 
ever, and now is a great time to buy one... 


t just 20 or 30 pence each, 

CDs represent one of the 

best value durable storage 

mediums around. The discs 
are not vulnerable to magnetic erasure, 
vibration damage, virus attack or even 
water damage — useful in these times of 
increased flood-risk. In fact, CDs 
represent a great way of storing and 
archiving important data. But it goes 
much further than that — their low cost 
makes them an ideal medium for 
creating short-lived projects, perhaps for 
delivery to a client or colleague. CD- 
ROM and DVD-ROM drives are pretty 
much ubiquitous now, so you can be sure 
that anyone you provide a disc to will 
have the capability to use it. That means 
that you can create multimedia projects, 
put entire Websites on CD, create digital 
portfolios, encode video or dozens of 
hours of audio ona single disc. 

You can use CDs as a delivery 
medium for commercial software, stock 
photography and video footage, music 
and far more besides. Multimedia 
tutorials and training can be supplied to 
laptop users for in-the-field training and 


instruction, and you can create demos 
that you can take to a potential client to 
show off your abilities. 

Using MPEG encoding, you can create 
high-quality movie footage that can be 
recorded as a VideoCD, or DVD-quality 
Mini-DVD. 

The old days when writing a CD was a 
hit-and-miss affair requiring dedicated 
hard drives and lots of expensive spare 
CDs is long gone. Nowadays, even the 
cheapest writers have substantial 
amounts of onboard memory and utilise 
under-run prevention technology to 
ensure that none but the most serious 
errors are able to ruin a disc in progress. 
Better yet, with DVD writers available for 
less than £300 you can even create discs 
with a capacity of 4.7 gigabytes — enough 
to store the most expansive projects. 

Write-speeds are up, software quality 
is excellent and writers are easy to use. 
Check out some of the latest products... > 


Feature Burning your own CDs | 77 


| Feature Burning your own CDs 


CD/DVD creation software 


WIN ON CD 6 


Price £59.99 (Without DVD £54.99) 
Company Roxio 

Telephone 00 49 2405 45080 
Website www.roxio.de/english 


TOAST5 TITANIUM WITH JAM 


Price £129.99 (Without Jam £59.99) 
Company Roxio 

Telephone 00 49 2405 45080 
Website www.roxio.de/english 


I T his program has passed through a 
number of hands from its original 

publisher, but thankfully hasn't lost its 

ability to satisfy the more technical user. 

WinOnCD has a nice friendly front- 
end offering access to a wide range of 
CD types, including DVD and Mini DVD 
(DVD ona CD). Beyond the menu 
screen, things quickly get messy 
because the programmers have tried to 
fit virtually everything into a single 
screen. While this may make interaction 
between program modules faster, it can 
be somewhat overwhelming. 

The program handles every 
conceivable data type, 
plus all the common 
recordable and re- 
recordable media types 
and capacities 
including DVD. Creating 
data CDs is a doddle, 
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DVD video is hardly any more 
complicated, and it enables you to 
produce professional looking discs 
complete with menus in minimaltime. It 
even supports overspan movies, which 
are automatically spread across multiple 
CDs or DVD if they exceed a single disc 
capacity. In addition to handling MP3s, it 
can also produce high quality, or multi- 
layer DVD audio discs. 

Although things are rather cluttered, 
this is a great program for the serious 
user. Its data security features are just 
the icing on the cake for anyone needing 
to record sensitive data to CD or DVD. 
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i oming from the manufacturer of 
(Mma both WinOnCDand Easy CD 
Creator, it’s little surprise to learn that 
Toast is something of a hybrid between 
the two. The Mac has few rival packages, 
so the one that does exist can afford to 
be a little more all-inclusive. 

The program is designed to handle 
both CDs and DVDs, and it offers 
comprehensive functionality to enable 
you to create data discs, Photo 
albums, Video CDs, DVD videos, 
audio discs and more besides. 

Of all the packages we've 
considered, this version offers the 
most extensive features for creating 
professional audio CDs. Whereas 
the competition focuses on 
organising and replaying MP3s, 
Toast with Jam concerns itself with 


the preparation of audio files for high- 
quality CD encoding. Jam 5 includes 
filters, normalisers, EQs and more. You 
can take precise control over the tracks 
and index points to create professional 
commercial masters. 

Considering the Mac’s multimedia 
reputation, Toast with Jamis a fittingly 
powerful piece of authoring software. 
It's just a shame about the name. 


EASY CD CREATOR5.3 PLATINUM 


Price £44.99 
Company Roxio 
Telephone 00 49 2405 45080 
Website www.roxio.de/english 
jE asy CD Creator concentrates 
primarily on being the easiest 
package on the market to use. It has a 
very simplistic front-end, offering clear 
choices, leading to different sections, 
each of which is uncomplicated by 
unnecessary options. 
Rather than endowing the program 
with all manner of technical writing 


capabilities, Roxio has concentrated on 
producing a program that is primarily 


focussed on preparing the data that 
you'll record. For instance, it has a 
limited video editor, an MP3 jukebox 
and it offers the capability to produce 
photo albums. 

It’s the only one of the programs 
featured here that isn't optimised for 
writing DVDs, although it can make video 
CDs. Much of the package is dedicated 
to the compilation and manipulation of 
MP3 audio compilations. It includes the 


latest version of Direct CD, 
which enables you to drag and 
drop files to the writer. 

In making Easy CD idiot proof, 
Roxio has limited its more 
technical capabilities, and 
expert users would do well to 
consider one of the other 
packages. However, the program 
is without doubt slick and very 
comprehensive. 


NERO 5.5 


Price £44 (Download version $49.99) 
Company Ahead Software 

Telephone 00 49 7248 911 800 
Website www.nero.com 


(though it was late to the CD- 

writing market, Nero has always 
had a reputation of being the program 
that enables savvy pros to do more, 
especially when it comes to writing 
obscure CD formats or copying 


options and capabilities. Pop and hiss 
removal is great for cleaning up poor 
audio recordings, while its drag-and- 
drop video conversion will create the 
correct format video files for your 
DVDs or video CDs. 


separate application dedicated solely to 
creating multimedia CDs and DVDs. 
The Nero interface has always been 
a little daunting to the inexperienced 
user, but now at the click of a single 


protected CDs. This version is even 
more powerful, with a greater range of 


In fact, this latest version also 


includes NeroVision Express, which is a 


CD/DVD writers 


SONY CRXP-90MU 


Price £299 (inc VAT) 
Company Sony 


Telephone 00800 26237669 


Website www.sonyisstorage.com 


hen you're on the move, it’s nice to 

have the capability to create your 
own CDs. This compact external writer is 
ideal for such situations, but because it 
connects to your PC via a USB 2 port, it's 
also perfect for situations when you 
simply need to share a single writer 
between multiple machines. 

The drive has a generous 8MB buffer, 
and in combination with its software, 
that should be enough to avoid all but 
the most severe causes of buffer under- 
runs. As usual with Sony, the company 
has eschewed the more popular CD- 
authoring packages in favour of bespoke 
programs. The main software is a 
package called B’s Recorder Gold, 
and while it’s perfectly competent it 


lacks the familiarity of the industry- 
standard packages. 

The drive also includes a Memory 
Stick slot, enabling you to transfer data 
directly from one of the proprietary 
devices to CD. If you have a 512MB stick 
full of digital photos or MPEG movies, it's 
a worthwhile facility. 

If you connect via USB 1, the speed is 
restricted, but via USB 2 you can read 
and write CDs at 24-speed. The unit can 
also read DVDs at up to 8-speed. 

Although it’s a versatile device, the 
CRXP-90MU costs too much for all but 
the most style-conscious purchasers. 
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button you can switch to the far easier 
Nero Express step-by-step wizard- 
based interface. 


Price £45 
Company LiteOn 
Telephone 01268 414159 


A t just £45, nobody could argue 
about the price of this budget 
model from LiteOn, but you can be 


It’s true that the unit only has a 2MB 


buffer under-runs, especially when 
writing a CD at 48x speed, which 
amounts to over 7MB per second. 
However, the drive incorporates its 
own version of burn-proof technology, 
which enables the writer to pause mid- 
burn to refill the buffers should they 
become empty. This technology 
eliminates the need for large buffers, 


Website www.liteonit.com.tw 


forgiven for asking, “Where's the catch?” 


buffer, which means less protection from 


LITEON LIR-48246S 


fast hard drives, or any of the other 
things that used to be essential. 

Officially the drive only writes 
650MB CDs, although it comes with a 
Z70OMB blank that worked perfectly. It 
has a 12x rewritable speed, which is half 
that of the lomega and Plextor drives, 
both of which are vastly more expensive. 

The unit connects via IDE (Atapi), and 
can be mounted in your computer 
vertically or horizontally. Nero software 
rounds off a high-quality bundle. 
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LACIE DVD-RW U&| 


Price £304.33 

Company Lacie 
Telephone 0207 872 8000 
Website www.lacie.co.uk 


hether you plan to make your own 

movies or you simply want to store 
your home videos, DVD is an ideal 
medium. However, while commercial 
DVDs can hold up to about 18 gigabytes 
of data, writable discs only offera 
maximum 4.7GB capacity. Furthermore, 
there are numerous competing formats. 
This drive writes the DVD-R format, 
which we suspect is likely to become 
the ultimate victor when the number 
of formats is reduced to a single 
industry-standard. 

Furthermore, the drive also offers the 

ability to read and write CDs and it can 
handle both rewritable DVDs and CDs. 


The unit is an external one that connects 
to your computer via both USB 2 and 
Firewire, although a cheaper USB-only 
version is also available. 

Unfortunately, the drive is 
significantly slower than the internal 
Pioneer modelon the right. However, it 
does only costa little more, and 
considering its versatile connectivity, 
the extra £50 is not much to pay. If you 
want to share a single DVD writer 
between multiple machines, this is an 
ideal choice. 
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Price £250 

Company Sony 

Telephone 01753 789 247 

Website www.pioneer.co.uk 
ioneer has genuinely lived up to its 


/ P. name, having been at the forefront 

of DVD-writing research. Its drives are 
harder to find than honest politicians, 
and it’s easy to see why. 

This brand-new model offers both CD 
and DVD writing. It can write DVDs at 
4-speed and CDs at 16-speed. Bear in 
mind that single-speed DVD is 1370k 
per second, whereas single-speed CD is 
just 150k, so it can actually write DVDs at 
5480k per second, compared to 
2400k/sec for CDs. Neither speed is 
particularly quick, butit’s the ability to 
write both with a single, affordable 
internal unit that earns this drive kudos. 
Furthermore, it can also handle 


IOMEGA CD-RW 48X 24X 48x 


Price £149 
Company lomega 
Telephone 020 7216 0003 


Website www.iomega.com/europe 


his lomega drive offers 

i performance that is only matched 
by the Plextor model, yet you only paya 
£38 premium forthe convenience and 
portability of an external USB 2 unit. 

It comes with its own Hot Burn Pro 
software which enables you to perform 
common tasks, but it’s not as powerful as 
the industry-standard packages. lomega 
argues that this is preferable to buying 
software stuffed with features you'll 
never use. The only trouble is that the 
company has no way of knowing 


precisely which features you werent 
going to use... 

Furthermore, this is the only package 
that doesn't include a single blank CD- 
or CD-RW disc to get you started. Nor 
does it include anything but the most 
cursory of instructions to get you started. 
None of these are serious flaws, but they 
add up to sour the overall impression. 

lomega is quite reticent about some of 
the drive's specifications — can it prevent 
buffer-underruns, and if so, how? What 
size discs can it handle, 700MB? More? 


performance at a good price 
missing details that cost it a higher se 
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PIONEER DVR-A05 


rewritable media, making it an ideal 
choice for archiving your data, or for 
pre-mastering. 

The drive includes a number of 
software packages, the most notable 
being MyDVD for creating DVDs and 
menus and /nstant CD/DVD for burning 
everything to disc. The software is 
mediocre, but you can always use 
industry-standard software with the drive. 

The DVR-AO5 offers great value and 
versatility, and you won't need multiple 
drives in your system in order to read 
CDs and DVDs. 
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Price £111.63 

Company Plextor 
Telephone 0870 429 3010 
Website www.plextor.be 


he Plextor name has always 

represented durable quality 
products. The only question is, are those 
features important enough to justify 
paying more than twice the price of the 
almost-identical LiteOn drive? 

The Plextor unit offers 24x rewritable 
performance, a figure matched only by 
the lomega drive. However, unless you 
frequently use rewritable media, that 
statistic will be of minimal importance. 
Of far greater significance is its fast 
48-speed performance when writing 
to CD-R media, which is assisted by 
Burn-Proof technology. This enables 
you to write a full 650MB disc in under 
two minutes. 


Not all media can cope with such 
speed, and the drive incorporates the 
ability to automatically adjust according 
to the capabilities of the media. By the 
same token, it includes a number of 
technologies designed to include 
recording quality, which is odd because 
as far as data recording is concerned, 
we didn't think that there was any margin 
for error... 

Like the LiteOn, this Plextor drive is 
an internal Atapi unit and includes Nero. 
If you need a fast, dedicated writer and 
money’s no object, spend it on this. 
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The in-depth guide for digital creatives 


Computer Arts Special 3D Web 
design —- COSB0037 

Our complete guide to Web 3D 
shows you how to: design a 
Shockwave game, create a virtual 
multimedia player in AXEL and build 
a screen saver in Xara 3D. We also 
have tutorials for modelling in Swift 
3D and plasma, and for combining 
film and 3D footage in Commotion. 
Plus, there's a feature on creating a 
3D online store with spinning 
objects and a round-up of the latest 
Web 3D books. 

CD Full version of Xara3D 2.1 (PC) 
plus AXELedge, Swift 3D v2, plasma, 
Commotion demos and more. 


Computer Arts Special Illustration 
— COSB0038 
Learn new illustration techniques 


and styles by following our practical 
walkthroughs. Do fashion sketches 
in Illustrator, create pattern designs 
in SymmetryWorks, add perspective 
in FreeHand, combine 2D and 3D in 
Photoshop, produce vector traces in 
Streamline, make textures in 
CorelDRAW and animate 3D images 
in FILTERIT. You can also find what 
makes the perfect portfolio, learn 50 
easy shortcuts and more. 

CD Dual demos of Streamline 4.0, 
Illustrator 10, FreeHand 10, FILTERIT 
4.1 and SymmetryWorks. 


Computer Arts Special Typography 
-—COSB0039 

Our comprehensive 100-page guide 
to type shows how you can create 
fonts in FontLab, design a poster and 
create raised type effects in 
Photoshop, animate type for the Web 
in Flash and produce smooth-moving 
text for your own film in After Effects. 
There's also our guide to the 30 
rules of type, an in-depth look at font 
management, stencil font design in 
Fontographer, the history and heroes 
of type and much more. 

CD 250 free fonts, full version of 
TopStyle 2.51 Pro (PC), plus demos 
of FontLab, Fontographer and more. 


Computer Arts Special Flash 
games- COSB0040 
Awhole issue dedicated to creating 


games in Flash MX. Our tutorials 
show you how to make your own 
versions of gaming classics such as 


Tetris, Asteroids and Space Invaders. 


Other techniques demonstrated 
include: character animation, sound 
recording, lip-syncing and 3D 
character creation. You can also find 
out what the experts think are the 
essential ingredients for creating a 
successful online game. 

CD Demos of Flash MX, Swift 3D v3 
and FlashAmp. Plus a range of the 
best Flash games and extensions. 


Computer Arts Special 
Photoshop- COSB0041 

A 100-page guide for Mac and PC 
Photoshop users. Our tutorials for 
creating stunning graphics include: 
spray-can graffiti effects, realistic 
explosion action scenes, natural 
media scan effects and futuristic 3D 
montage images. We also show you 
techniques for slicing Web graphics, 
customising tools and brushes and 
perfecting colour in digital images. 
Plus, 50 brand new Photoshop 7 tips 
as well as advice from professional 
Photoshop designers and illustrators. 
CD Photoshop 7 demo, plus over 50 
project files for our in-depth tutorials. 


’ 


Issue 76 —- Code COA76 

Attik, TDR, Mill film speak out 

CD AXEL 1.0 (full product), video 
tutorial on PS7, AXELedge 1.5 trial 


Issue 77 - Code COA77 

New series: going freelance in design 
CD Fully-working 3ds max demo 
including 34 interactive tutorials 


Issue 78 —- Code COA78 
Faster results in Photoshop, setting 
up in 3D, Flash animation, InDesign 


CD trueSpace3 full version 


Issue 79 — Code COA79 
Inside the creative mind, setting up 
in illustration, 3D in Cinema 4D R8 


CD ImageZoom 1.2, Amapi 3D 5 


Issue 80 - Code COA80 

Designing for cross media, women in 
design, 3D in Photoshop and more 
CD Director MX, Maya PLE 4.5 


All back issues cost £6. Postage free in UK. Add £1 per issue for European orders. Add £3 per issue for the rest of the world. 


CALL THE HOTLINE ON: +44 (0) 870 444 8455 
or [AKE OUT A SUBSCRIPTION — see page 96 
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084 Crush Design 
“Who wants to sit and watch a little bar 
grow in size or some pointless designer 
wank graphics performing amazing Flash 
trickery? Not me: | want to swat flies or 


smash up PCs while | wait.” 
Carl Rush, Co-founder 


Play games while you wait at 
[w] www.crushed.co.uk 


deal hee 
up er 


1 Par Soe Bact Ze Pll 


me 


| 2yosy02 »M you've yet tose verte I oc never ni 4 SNOW. 
12705 
’ ‘ q will be 
rarely your chance to score tickets in advance! ihe band 

Sunday. 
este lo by orate Su PS 
December 24 a Padi. PA (hn aaa: sow) Hicks to ht 


joo ik ony be avaible through the we To onder tickets, send 3 


ANDORESS Gn case we net 0 et wh Te fist 75 reponse wl 
reserved lor 
ie nota ith fre information and havea uctet ‘ 
yi ‘ ; 

heen to purchase ache doer {55) Ws the holidays, bay a chet 


aA oS 
090 Jo 


hnJohn 


“The navigation had to be obvious to 
people wherever they come from. We 
tried to use a universal language, and 
one of the best is made of comics, 
characters and signs that everybody 
reads instantly.” 

Christine Boulanger, Co-founder 


088 Bukwild 


“It took a while to get the concept right. | 
knew | wanted something with a physical 
look, that had something malleable about 
it... Ryan [Vanni] had the idea of making a 
pseudo-advertisement for some virtual 
product with our branding.” 

Robert Reinhard, Creative Director 


Explore this cartoon wonderland at [w] 


You'll wish you could physically touch [w] 
www.johnjohn.co.uk 


www.bukwild.com 
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Crush Design 


Crush Design favours minimalism and eschews “pointless designer wank graphics” for online 
portfolios, according to co-founder Carl Rush... 


here's a place in Brighton where you can 
feel free to smash Macs and PCs with an 
axe, kill legendary Flash designer Han 

i Hoogerbrugge and fry heads. Actually, it’s 
not in Brighton proper; it’s the portfolio site for 
Brighton-based agency Crush Design & Art Direction. 

The company was started about four years ago as 
the brainchild of Carl Rush. Presently, Crush offers 
print-based design primarily, though it took ona 
considerable amount of Web projects before the tech 
sector bottomed out a couple of years back. 

The agency has designed numerous album covers 
and marketing campaigns for clients like Urban 
Theory, WEA and Union Square. But there's also Web 
design, including sites for 1Giant Leap, Baaba Maal 
and Ocean Colour Scene. However, the company’s 
biggest client to date is Heineken International, for 
whom Crush produced marketing and merchandising 
for the brewer's Heineken Thirst Dance tour. 

The agency employs three designers and a ‘Web 
head’, tapping away on QuarkXPress, Photoshop and 
Illustrator installed on G4 laptops. Laptops? “A laptop 
can handle our work just as well as a tower and it means 
that we can take it home at night if needed — working 
on the sofa while watching EastEnders — or take it to a 
client meeting,” says the self-confessed soap disciple. 


Hands on 


But there's a healthy culture working with traditional 
tools too. “We like to get our hands dirty and it's 


encouraged to produce work outside the confines of 
the computer,” says Carl. “So the woodblocks, paints, 
saws, scalpels and inks are often strewn around the 
studio. Some people say that they can see our 
company style, but I’m not so sure.” 

Inspiration comes from numerous sources. “We 
have a big library of books and keep scrapbooks of 
ideas, found ephemera, discarded designs and general 
junk found on the street,” Carl begins. “The car boot 
sale is always a favourite, and Brighton has a great 
booty on Sunday mornings. We play music all day and 
I'd say that this is also a good source of inspiration.” 

Then, of course, there's Crush’s portfolio site itself, 
all animated lines and geometry. While it’s there to 
promote the agency to prospective clients, it also 
serves to promote the numerous illustrators that Crush 
commissions. It was illustrated and storyboarded in- 
house, though occasional collaborators Broad Snout 
carried out the Flash programming. 

“The screen was split into two sections,” says Carl. 
“One: rollover. Two: reveal. It's an interface that allows 
us loads of freedom in how the work is displayed. The 
design brief to ourselves at the time was to produce a 
subtle minimalistic and functional Website structure to 
host the portfolio. A lot of our work uses bright colours 
and can often be quite quirky. The most important 
aspect was that the work shone above the Website 
interface. | hate those ‘designer wank — design for ) 
designs sake’ style sites. It's the quality of the 
commissioned work that counts at the end of the day.” > 


1. A self-promotional poster by 
Crush Design. 


2. As you wait for sections of the 
Crush site to load, you're invited 
to play a series of off-the-wall 
Flash games designed by Han 
Hoogerbrugge. 


3. According to Carl, the idea 
behind the Crush portfolio site is 
roll over and all will be revealed. 
Each shape in the left-hand 
window corresponds to a shape 
on the completed article, 
displayed on the right. 


4. A handful of flyers and press 
advertisements produced for The 
Boutique nightclub. 


5. Crush designed the cover of 
Fantabulosa — The Dictionary of 
Polari and Gay Slang for 
Continuum Publishing, 
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Loading screens are replaced by tiny Flash games 
spawned from the warped mind of Han Hoogerbrugge, 
specially commissioned for the task. These include: 
PC/Mac Crusher, where you have to hatchet as many 
computers as you can; Bug, where you kill flies or, 
should your shots miss, the illustrated Hoogerbrugge; 
or Toast, a variation on clay-pigeon shooting. 

“Who wants to sit and watch a little bar grow in size 
or some pointless designer wank graphics performing 
amazing Flash trickery?” asks Carl. “Not me: | want to 
swat flies or smash up PCs while | wait.” 

He continues: “When the site first launched we only 
had a ping-pong style game, but when | saw the work 
of Han Hoogerbrugge | flipped out,” he enthuses. 
“What a great artist! For me, the best Flash designer 
I've ever seen. | commissioned him to design six 
games for me based around the idea of ‘CRUSH’ and 
he came up with some real treats. Massive respect.” 

By using tiny graphics, reusing elements and 
animating relying on ActionScript rather than 
tweening, the games file sizes were kept to an 
absolute minimum. 


Expansion 


For the future, Crush will continue to do what it’s doing 
now: great graphic design. But there'll be more than 
print or even Web projects. The company has just been 
commissioned to produce a title sequence for an 


2. Crush's area of expertise is album 
cover design. The company’s client 
list includes Union Square Records, 
for whom it designed the Soul 
Allnighter covers featuring some deft 
Illustrator and Photoshop work. 


3 & 4. Crush’s Baaba Maal site 
provides plenty of information 
about the Sengalese singer, but it 
also features an ActionScripted, 
tentacled presence as its main 
method of navigation. 
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independent movie. Crush has also been 
commissioned to do a design for pyjamas by a client 
who saw the portfolio site, and there's also a 
Rotovision book on the way, entitled CD ART — 
Special packaging in CD design. Carl adds that he's 
keen to clean up the present site, adding “better pack 
shots and cleaner screen grabs”. 

Whatever Carland his band of Crush creatives 
decide, there's one thing you can be sure of. In 2003, 
the company will “do good design, get paid and do it 
in Brighton”. 

In terms of advice for anyone hoping to build their 
own online portfolio, Carl is clear: “Keep it clean,” he 
recommends. “When students send me links to their 
portfolio site — all |’m interested in is their work. If it 
takes me more than two seconds to find the actual 
work, I’m off somewhere else. If they’re a fantastic 
Flash designer, they should save that Flash work for 
real projects or college briefs and not piss around 
creating some Flash extravaganza on their portfolio 
site which just annoys the hell out of someone 
genuinely interested in seeing their work.” 

Don't say we didn't tell you. EEE 
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Presents... 


design a site for photographer lan Hooton last 


the Crushed.co.uk site. “The basic structure is 


similar: roll over and then reveal,” explains 


1. lan Hooton commissioned Crush 

to create his portfolio site after he 
saw the agency's own Website. It 
features a roll-over-and-reveal 
model, as well as subtle fades craftily 
designed in Flash. 
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Other people's portfolios 


Crush has also designed a site for a photographer, lan Hooton... 


Crush’s online portfolio led to acommissionto | movement and subtle fades. The effect is 


evident when you roll over the thumbnails as 


year. It was designed onthe same principlesas — you navigate between sections. 


Carl explains how this was achieved: “The 
effect on the thumbnails is simply achieved by 


Carl. “lan had seen our site and thought the 


structure worked well. He wanted the same 
but different.” 

The site itself is pretty simple; it’s basically 
aseries of examples of Hooton’s photography. 


However, it’s remarkable for its smooth 


a slow motion tween from an alpha level of 0 to 
100 per cent. For the section transitions we 
used a large gradient fill, once again moving 
from an alpha level of 0 to 100 percent, and 
tweened it across each section of text to 


increase subtly.” 


STORAGE DEVICE SUPERTEST > MICROSOFT'S TRUSTED COMPUTING: IN-DEPTH FULL REPORT 


MACFORMAT 


ALL THE LATEST 
FROM APPLE EXPO! 


New hardware, new software, 
new strategies... Read it first CSTE 
POWERBOOKS 


in MacFormat! 
GET PERFECT GREYSCALE SOFTWARE 
RESULTS WITH TOM ANG 


Tips from an expert on filters, techniques 
and how to output top results 


HOW-TO... 


V Create a photo montage 
~ Exploit free image app GraphicConverter 
V Get your old vinyl audio onto CD 

V Protect yourself in OS X 
And much much more... 


SUBSCRIPTIONS HOTLINE NUMBER 0870 ht, 8646 


PLEASE QOUTE REFERENCE CODE www.macformat.co.uk 
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1, The California Safe Kids site was developed for a non-profit 
organisation whose mission is to educate parents, teachers, 

and health care specialists on the dangers that face children. 
The site is largely dynamic, pulling most of the content from a 
database. “We wanted the main graphic to be of children playing 
to give the design a heart warming feel,” says Creative Director 
Robert Reinhard. 


2. The Silvertide site is heavy on visual metaphor. Bukwild tried 
to include imagery one might find in the green room of a classic 
americana rock and roll band. To wipe between the sections 
Robert came up with the idea of having the paper crumpling and 
unfolding again, which was accomplished through the 
unsurprising technique of crumpling a piece of paper and 
shooting it through each step. 


3. For the Silvertide site the team was asked to make a 
downloadable MP3 player with several songs already 
embedded. Robert built the core design and functionality in 
Flash and then used QuickTime’s skinning feature to knock out 
the edges of the movie, making it feel like a small program. 


4. With Michael Tolcher's site, the musician's image hadn't yet 
been agreed upon, so Bukwild had to go through three major 
designs before the client felt it'd got things right. These follow the 
progression from folk, artsy-imaginative and urban alternative. 
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President Bush warned Iraqi leader 

Saddam Hussein on Wednesday that he i 
would be entering his “final stage" if he 


denied having weapons of mass 
destruction, and began sssembling » 
B coalition for possible. wan 

} (2 Records, 11/5/02) 


| Tolcher on Letterman 
Delta Air Lines announced Wednesday 
that it will create anew low-fare airline in 
a bid. to lure budget-minded travelers 
from its lower-cost rivals, 
(Ryan Vanni, 11/2402) 
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Bukwild’s Creative Director, Robert Reinhard, explains some of the ideas and techniques that brought the company’s site to 
life. “We wanted it to exude credibility,” he says. “We wanted it to feel snappy and be fun.” 


Ei “| had the idea of putting the bubbles 
in the background as an after 
thought, but now | think they really make 
the piece. | experimented with having 
them constantly animating, but it caused 
the site to chug and because the area you 
can see them in is small, they were usually 
off screen. So now they only animate 
during the initial loading." 


(23 “We designed our site so we could 
change the theme of it with a couple 
of days of work to keep the site fresh. In 
doing so, we would change the splash ad 
(‘come get some’), the background 
(orange bubbles), and the placed image in 
the studio section (the can). The news 
section is fed by a MySQL database." 


“| use a lot of shadows, bevels and 

gradients to give the site a physical 
look, so that you could imagine it as a 
printed, real object. The flipping portfolio 
thumbnails were based on an idea from an 
earlier project. | was looking for a way to 
have a grid of thumbnails that would look 
interesting unto themselves but would also 
display easily their project name." 


“| keep the flipping theme present in 

the portfolio close-up with the small 
numbered squares on the left. Showcasing 
the work was paramount so | reserved a 
lot of screen space for the screenshots. | 
initially wanted to make the bottom tabs 
bounce off the walls, but it got too 
complicated and distracting so | had them 
move and follow your mouse instead." 


Bukuwild 
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Bukwild’s online home tells the world what it’s about. “This really is a good look at what we are,” says 
Ryan Vanni, Studio Director and Co-founder, “fun, humorous and with a reputation for good work...” 


ukwild was let loose on the world only two 
( years ago. In that time, this Sacramento- 
ri based design studio has shown what the 

/ entrepreneur spirit is all about — hard work, 
perseverance and an indomitable faith in its own 
abilities — and built a rich, diverse portfolio from 
scratch. Now the close-knit, four-strong team is 
enjoying showing it off on a spanking new Website. 

The site has been designed to reflect the group’s 
sense of fun and great design ability while laying out 
samples of its work forthe world to see. It’s a fantastic, 
punchy piece of Flash — uncomplicated, beautifully 
textured and curiously tangible. You feel like you could 
pick it off the screen, play with it, and display it ona 
shelf in a sunlit room for your friends to admire. 

“It took a while to get the concept right,” says Robert 
Reinhard, Bukwild’s Creative Director. “I knew | wanted 
something with a physical look, that had something 
malleable about it... Ryan had the idea of making a 
pseudo-advertisement for some virtual product with 
our branding.” A quick probe of the local supermarket 
unearthed a generic soft drink whose flamboyant 
packaging provided the primary inspiration forthe 
site's colours and design scheme. 

“It was important that the site had character and 
personality,” says Ryan. He likes to tell clients that it’s 
Bukwild’s job to create a site that is the next best thing 
to encountering the company face to face. That is, he 
says, to deliver “the fundamental essence of the 
company, organisation, artist or what have you through 
really accurate design.” 

So it was important that its own site did just that. 
The studio considered its previous site to be too flashy, 
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unwieldy and too serious. “It just wasn't communicating 
who we are,” says Ryan. The new site is bright and fun 
without losing any measure of professionalism — much 
more a beast in the Bukwild mould. If it indulged in the 
odd teasing argument about personal music tastes, 
then it would have them nailed. 

Naturally, the site’s main purpose is to show off 
Bukwild’s capabilities. That's inherent in the design but 
also in the portfolio of work exhibited on the site. The 
Bukwild designers were keen to show the diversity of 
their work. “On the one hand, we have this really rock 
and roll site for the band Silvertide,” says Ryan, “and on 
the other we have a database-driven site, California 
Safe Kids, that’s targeted at parents and health care 
professionals. We hashed over and over which projects 
to feature, and we were pretty happy with the outcome.” 

The key to creating their online portfolio was to keep 
it simple. The designers divided their work into three 
types — Web, print, and identity — and displayed each 
project as a package of images that can be clicked 
through. The explanatory text was kept deliberately 
brief and to-the-point. A measure of liveliness is 
offered through moving tabs and flipping images. 

Web work is Bukwild’s bread and butter so it’s 
essential that its site, and its portfolio, prove it’s up to 
the task of any Web job. “Your site needs to represent 
your calibre of work in its design,” says Robert. 

It seems to be working. “Since launching the site 
we've had a fantastic amount of enquiries,” says Ryan, 
“and people are coming to us looking for us to do 
work.” So the frosty days of cold calling could be 
coming to an end. “In the beginning, | made hundreds 
of calls trying to find work,” says Ryan. “I started with 
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5. Robert initially planned to render the thumbnails of 
Bukwild’s portfolio site with the proper perspective changes 


for each frame of the flipping animation. However, it turned out 


that with the speed of the flip you couldn't tell the difference 
between the accurate skewing and a simple horizontal scale. 
So to save time and file size he opted for the latter. 


6. Vrilakas’ site was designed to closely match the print 
identity of this California-based firm of architects. “I used a 


advertising agencies and worked right down to anyone 
| could get on the phone.” 

At the time, Bukwild had done one site - the first 
version of its own. Eventually it was enough. Ryan got a 
call back from an architect who hired him to build a 
site for his own company, and after that he 
recommended other friends and acquaintances to 
Bukwild. “His recommendation gave our portfolio 
integrity,” says Ryan. 

This first connection formed the basis for much of 
Bukwild’s early work. “Our earliest sites were for 
architects, home builders and interior designers, 
which led to other architects and so on,” says Ryan. 
“As a result, we've done a disproportionate amount 
of jobs in that industry.” But the company’s now 
breaking out from these confines and starting to roam 
different plains. 

“We're working on getting involved with the record 
industry, which is nice because there's a lot of design 
freedom. And if a band is successful, the site can get a 
lot of traffic from all over. So far we've done sites for 
J Records and Octone Records and we're just starting 
a third for Goatee Records.” It's not Dreamworks or 
Geffen yet, but give it time and a few ounces of 
creative freedom and it'll be there. 

After all, Bukwild was born when the dotcom 
bubble collapsed into a big puddle. Not only has the 
company survived, it’s walking with steady feet. “If we 
can make it now, we can make it any time,” says Ryan. 
And then it'll be running with mighty strides. EES 
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subtle shadow along the border of the Flash animation to give 
the site a physical, print look,” says Robert. “A slight gradient 
in the background adds to the illusion.” The client wanted only 
conservative uses of animation on this site and so Robert 
spent most of the animation time on the category navigation. 
It derives its movement from scripting rather than tweening, 
enabling the user to click a new option in mid-motion. The 
effect is a smooth transition to the new choice as opposed to 
the jerkiness characterised by tweening. 
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JohnJohn 


“The navigation had to be obvious to people 
wherever they come from.” Design and music 
company JohnJohn describes its unique 


navigational style for its online portfolio... 


nline comics, TV cartoons, games, 
illustration, painting, a recording company, a 
community-based radio station and evena 
band... the skills attached to JohnJohn's 
portfolio are almost neverending. 

For a company with such a diverse and varied 
workbase, it’s surprising that JohnJohn is just a two- 
person company. Based in Whitechapel, London, 
JohnJohn was founded three years ago by Christine 
Boulanger and Benoit Viellefon when they 
amalgamated their ample — yet different — skills. 

“| was really interested in films, music, writing, 
comics, cartoons, setting up stories... so when | 
discovered the Mac in 1989, | was really interested,” 
says Benoit. “| started to do animation, graphic design, 
3D, and CD authoring seemed to be the way forward.” 


After working in the games industry in the mid-’90s, 


Benoit became confident in HTML and Flash. He had 
an idealistic view back then that technology would 
evolve and he would be able to migrate his skills into 
one field: animation and music on the Internet. So with 
the help of Christine and her illustration and Web 
skills, JohnJohn was born. 

The painting and sketching element to JohnJohn’s 
portfolio is courtesy of Christine. “I learned to draw on 
computer by myself in 1995,” she says. “I first worked 


for heart surgeons, illustrating surgical operations and 
illustrating articles for national newspapers.” But 
Christine wanted to extend her drawing skills by taking 
her expertise to the Web. The art and design stem of 
the company comprises many big-name companies, 
including the BBC, Nickelodeon, Ribena and French 
companies TF1 (national television company) and 
French Telecom. 

“We've just finished an online game for BBCi, which 
you can see at [w] www.bbc.co.uk/so/games/ 
snowfight,” says Christine. For this game you have to 
pelt ‘celebrities’, such as Gareth Gates and Christina 
Aguillera, with snowballs to win points. Other projects 
for the Beeb include an online advent calendar, with 
26 animation shorts — one for each of the 26 windows. 
“The online calendar for BBCi was a lot of fun. We had 
carte blanche to do whatever we wanted — as long as 
they liked it, of course!” says Christine. “We did the 
project from A-Z, creating the stories, the characters, 
the animations... and they loved it — it multiplied the 
traffic to the Website four times.” 

For Nickelodeon, JohnJohn created six 30-second 
Flash movies with Bomb Productions (The Big Giraffe 
and Genius Goldfish Show), which were broadcast on 
the children's satellite TV station and on its site at [w] 
http://nick.co.uk/go/nicktv/nicktv.shortstuff.gg.rhtml. 


Unique navigation 
JohnJohn's current bustling portfolio, which can be 
seen at [w] www.johnjohn.co.uk, delivers a unique 
navigational experience. Entering the site takes you to 
a street full of labelled buildings where you choose 
which area of the portfolio you would like to explore 
by going through the corresponding door. Here, you 
can choose between Art Gallery, Games, Design, 
News, Shop, Radio or Live Music. Text is minimal 

and you can easily find your way around using the 
illustrations. “We created our logo with two 
characters, so we thought we should create a world 
around them,” says Christine. “The navigation had to 
be obvious to people wherever they come from. We 
tried to use a universal language, and one of the best 
is made of comics, characters and signs that 
everybody reads instantly.” 

Despite the navigation of the company’s portfolio 
being unique, Christine and Benoit wanted a classic, 
almost timeless design. “When | created the dancing 
characters three years ago for our homepage, Benoit 
and | were bored with the Web being overstuffed with 
futuristic, in-your-face designs that were lacking in 
humour and colour,” explains Christine. “We also 
wanted something very simple and as timeless as 


1. This album cover commissioned by the Japanese musician 
Yataksemamoto has been created first in Adobe /llustrator and 


finalised in Adobe Photoshop. 


2. These illustrations have been commissioned by the greeting cards 
company The Carte Postale. They are on sale worldwide and available 


on the Internet at [w] www.thecartepostale.com. 


3. Commissioned by BBCi for Valentine's day, this game has been 
created using Adobe /llustrator and Macromedia Flash. 


4. Again commissioned by BBCi, this interactive advent calendar gave 
daily access to Web competitions and games. It was fronted by a 
series of 26 cartoons running for two minutes each, as well as online 
games and design-your-own ecards. It was all created in /llustrator, 
animated in Flash and integrated in HTML pages using Dreamweaver. 
JohnJohn managed the project from A to Z, coming up with the stories 


and creating the characters. 


— 
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Build your own portfolio 


Take the professionals’ advice and create your own portfolio... 


Direction You must know what sort of job you 
want to do and select the work that you'll 
display accordingly. Don't try to show 
everything, and try to get something that 


looks coherent. 


Selection Your old stuff may not be as good as 
your recent work. If you have similar projects, 

only show the latest one and quote the others. 
Also if you have a bit of experience, avoid 


showing college work. 


Reputation Being part of a team working for 
well-known brands looks good, but being 
responsible for a whole project for smaller 
clients looks just as good if not better. If you're 
a freelancer, having recurrent direct clients is a 
proof of reliability — having big names direct is 


the key to press coverage. 


Target Target your clients by choosing an 
appropriate design. You have a direction, so 
you should study the type of market you want 


tocrack and orientate your design accordingly. 


Efficiency If you design a site, make it clear, 
fast and very easy to navigate. If your 
client/employer struggles to find its way, 
you're sure to lose them. Also, be concise 


with the content. 


Style Try to be elegant and stylish (unless you 
target other markets such as game design, for 
example) and most of all, put your humour and 


intelligence in the foreground. 


Advertise Spending one month designing a 
nice portfolio is useless if you don't advertise. 
Contact people, send emails with little teasers, 
but be to the point. Put ads in magazines 
(watch your budget), get press releases, be well 


ranked in search engines. 


Online/ Offline Having a site is the cheapest 
way to touch a wide audience, but lots of 
companies will still want to get a showreel on 
CD-ROM. Develop your portfolio in orderto be 
able to do an online version as well as an 


offline version. 


Don't lie Don't exaggerate your competence or 
pretend that you did this or that when your 
colleagues did it. Clients/employers can see 


through it in a matter of minutes. 


Literature In your portfolio, correspondence or 
emails, be concise and check your spelling. 
People don't have time to read lots of text, and 
bad copy will get you rejected forever. The first 
impression is often the main barrier you need 


to overcome. 
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possible; we don't want to have to change our design 
every six months.” 

It's the colour and humour lacking in other sites that 
JohnJohn bases its work on, and it’s the company’s 
signature style, or the ‘JohnJohn style’ as one of the 
company’s clients has named it. But having just one 
easily identifiable style isn't something that Christine 
and Benoit consider to be a good idea for their 
company's portfolio of work. “It’s like bosses who let 
their employees do the same job for 20 years,” says 
Christine. “They think you'll be more efficient if you do 
one thing. Well, you decide. | think the more you 
experiment, the better — you keep your brain awake 
and, most of all, you don't become jobless if people 
don't want your famously identifiable style anymore.” 

JohnJohn is currently working on a set of postcards 
for greetings card company The Carte Postale, [w] 
www.thecartepostale.com, who was intrigued by the 
JohnJohn characters. The postcards will be available 
to buy in shops from February. “They [the postcards] 
have a worldwide distribution,” says Christine. They 
sell up to a hundred thousand copies each. “It’s a lot of 
work, but The Carte Postale is so happy about it that it 
wants more.” The project is still in its early stages. 


Techniques 


Where many design companies favour one or two 
choice applications for their work, the diversity of 
JohnJohn's portfolio requires a plethora of software 
comprising /llustrator, Photoshop, Flash, HTM, 
JavaScript, ColdFusion, Cakewalk Audio Pro and 
Sound Edit. As far as hardware is concerned, the 
work is shared between an Apple G4 Quicksilver 
800MHz and a G3 600MHz PowerBook, along with 
lots of pencils, paper, paint, Italian expresso coffee 
and daylight. 

In the future, JohnJohn wants to add another string 
to its bow by looking into the possibility of using 3D 
applications. “To be honest,” says Christine, “it’s 
already very difficult to stay on top of the software that 
you master, as it changes all the time, especially the 
Web-authoring tools.” 

So, expect to see some 3D animation from the 
company soon. Or maybe a number one album from 
JohnJohn the band... who knows what the future holds 
for this diverse design company? EI 


EI 


1, Created for Nickelodeon and in collaboration with 
Bomb Productions, this 6x30-second run of Flash 
movies is broadcast on Nickelodeon TV as well as their 
Website at [w] www.nick.co.uk/go/nicktv/nicktv. 
shortstuff.gg.rhtml. The films form a castaway talkshow 
that takes place ina space station hosting a giant giraffe 
and two ‘genius goldfish’. 


2. A piece of self-promotional work created in Adobe 
Illustrator and animated in Macromedia Flash, these 
Cartoons are JohnJohn’s signature and are used in its 
online portfolio. 
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BOOK REVIEWS 


CD AND DVD RECORDING FOR DUMMIES 


Price £18.99 Author Mark L.Chambers Publisher Hungry Minds ISBN 0-7645-1627-2 


ontrary to what it may say on the 

fi cover, this book is primarily for 
Mac users — much of the discussion 
being Mac biased. PC users will gain 
some information, but we suggest you 
look elsewhere if you want PCs covered 
in more depth. 

This manual offers a thorough 
overview of CD authoring, and goes into 
particular detail about the hardware 
installation and set-up that you'll have to 
handle. Chapter seven is where you'll 
begin to learn the basics of CD 


authoring, and then you'll move onto 
more advanced techniques using 
recording software (Easy CD on the PC 
and Toast for the Mac) as well as Direct 
CD to demonstrate some packet writing 
techniques. The book concludes with the 
top ten troubleshooting tips for hardware 
and software. 

Overall, this is a well-structured 
walkthrough that allows you to easily 
learn new skills. The screenshots are 
adequate and, with some well-chosen 
hints and tips as wellas pitfalls to watch 


out for, this is a great introduction 
to CD and DVD authoring, but 
only if you've got a Mac 
set-up. If you’re a PC 
user, a book that 
offers more 
hands-on 
explanations for 
the PC format would 
be a better buy. 


VERDICT 


3.5/5 


BURN ITI: CREATING YOUR OWN GREAT DVDS AND CDS: tHe ofriciatHP Guide 


Price £15.99 Author Mark L. Chambers 


i T his manual can be used to guide 

i any novice through their first few 
sessions of CD and DVD authoring. If 
you've got HP hardware and software on 
your PC, you'll feel infinitely more at 
home than Mac users because the vast 
majority of the tutorials cover HP 
bundled authoring software. 

To start things off, there's an excellent 
overview of the technical aspects of how 
CD and DVD authoring actually works. 
This is followed by chapters that look at 
how to install hardware and prepare your 


computer and material. Things are 
rounded off nicely with tutorials that 
take you step by step through the 
recording process. 

There's very Little that isn't covered in 
this book. The author does an excellent 
job of dividing the authoring process into 
easy-to-understand stages, which he 
explains clearly and supports with easily 
followed tutorials. 


VERDICT 


4.5/5 


Publisher Prentice Hall 


ISBN 0-13-100105-1 


This is one of the few guides that looks 
closely at the entire DVD authoring 
process. If you've got HP 
equipment, this is 
the book you 
simply cannot 
do without. 
The more 
mundane aspects 
of CD and video CD 
authoring round off this 
superb companion to your 
HP DVD burner. 


MANAGING MULTIMEDIA 


Price £3799 Author Elaine England & Andy Finney Publisher Addison-Wesley ISBN 0-201-36058-6 


Al t first glance this book looks to be 

an academic overview of the entire 
multimedia authoring process. It 
certainly forms the bedrock of many 
such courses, but smaller authoring 
teams as wellas lone designers have 
plenty to gain from reading this book 
from cover to cover. 

The entire life cycle of a multimedia 
project is covered as you move through 
the chapters. As the book is aimed at 
project managers, each of the elements 
that will ultimately make up a given 
project is thoroughly covered, with any 
technical aspects comprehensively 
explained. As many of today’s 
multimedia authors will specialise in 


only one or two disciplines, this book 
allows you to see what else is involved in 
bringing a project to successful 
completion — something that’s 
particularly important for any designers 
working alone. 

Don't be overwhelmed by what seems 
to be an inordinate amount of complex 
explanation — the book has much to 
offer anyone embarking on a new 
multimedia project. Make sure you read 
the last chapter first because this covers 
your market research and will help you 
to understand who you're designing for. 


VERDICT 


4/5 


MULTIMEDIA: MAKING ITWORK ctueoitiom 


Price £36.99 Author Tay Vaughan Publisher Osborne ISBN 0-07-219095-7 


f you're looking for just one manual 

that'll explain in jargon-free 
English what a multimedia project 
entails, here it is. This is not a hands-on 
tutorial-based manual, but one that 
takes a wider view offering not only 
advice and solid information but also 
illustrates each of the key steps that any 
multimedia project will go through. 

Divided into five sections, the first two 

cover the ubiquitous question: What is 
multimedia? Chapter three is where you 
get your hands dirty, dealing in detail 
with your project's key elements of text, 
sound, images and animation. 
Concluding sections — including a much 


expanded section on the Internet — look 
at project management and delivering 
your completed brief. 

The author has tried to cover as many 
hardware and software packages as 
possible, so you should find at 
least some mention of the 
one you're using. If you're S. 
about to start planning 
your next Website or CD 
presentation then this 
book will offer some 
essential guidance. 


VERDICT 4,5/5 


IN YOUR FACE TOO! 


Price £19.99 

Authors Daniel Donnelly 
Publisher Rockport 
ISBN 1-56496-891-X 


ow inits second edition, this 

portfolio of interactive design 
offers a superb overview of some of the 
very best user interface design. As the 
author points out, “Essentially, these 
interfaces make complexity manageable 
while remaining pleasing to the eye. The 
times have changed, but design 
essentials remain the same.” You can 
see instantly how the “design essentials” 
have been used as a guide to produce a 
user-focused experience. 

Four areas — CDs, Websites, DVDs 
and kiosks — are explored. It’s inspiring 
stuff if you’re looking for ideas for your 
next portfolio. Presented in full-colour 


throughout, each design is shown with 
superb screenshots that instantly allow 
you to see how the design was built and 
how the interface presents the 
information to the user. 

Astunning portfolio is now a must for 
all budding designers. Above allelse, 
this book illustrates how far electronic 
design has come over the past few years. 
The designs in these pages should 
inspire you to create unique results that 
are equally stunning. Immerse yourself 
in these state-of-the-art designs. 


VERDICT 5/5 


USER-CENTRED WEB DESIGN 


Price £33.99 

Author John Cato 
Publisher Addison-Wesley 
ISBN 0-201-39860-5 


f you aim to place your current 
portfolio of work online, 
understanding who your audience is and 
how it should interact with your site is a 
prerequisite. Here, the author teaches 
his AUA (Awareness, Understanding, 
Action) theory of interface design. 

You won't see software packages 
explained here. This is not a how-to 


] 


manual, but a Web design theory course. 


You're not only presenting your work to 
possible clients, but also attempting 
to influence how your visitors perceive 
your site. This book teaches how this 
can be done with well-planned and 
thoughtful design. 


Over seven chapters you're shown 
how each element of the design process 
can be handled. Assuming you already 
have the practical skills to realise your 
design, this book will show you how to 
place those skills within the context of 
good user-centric design. The 
presentation could have been much 
better, but at the heart of this book is 
excellent advice which will ensure 
that you're designing your online 
portfolio for the people who really 
matter: your visitors. 


VERDICT 


4/5 
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